《layer 彈出層》

       	
           	//信息框例一
layer.alert('白菜級別前端攻城師賢心', 8);

//信息框例二
layer.msg('前端攻城師賢心', 2, -1);

//詢問框
$.layer({
    shade : [0], //不顯示遮罩
    area : ['auto','auto'],
    dialog : {
        msg:'您是如何看待前端開發?',
        btns : 2, 
        type : 4,
        btn : ['重要','奇葩'],
        yes : function(){
            layer.msg('您選擇了重要。',2,1);
        },
        no : function(){
            layer.msg('奇葩!!!',2,4);
        }
    }
});
//快捷調用:layer.confirm();

//頁面層例一
$.layer({
	shade : false,
	type : 1,
	area : ['auto','auto'],
	title : false,
	border : [0],
	page : {dom : '.layer_notice'},
	close : function(index){
		layer.close(index);
		$('.layer_notice').show();
	}
});
			
//頁面層例二
var i = $.layer({
	type: 1,
	title: false,
	closeBtn: false,
	border : [5, 0.5, '#666', true],
	offset: ['0px',''],
	move: ['.juanmove', true],
	area: ['620px','auto'],
	page: {
		html: '自定義的html'
	},
    success: function(){
        layer.shift('top',500);
    }
});
$('.juanLu').on('click', function(){
	layer.close(i);
});

//iframe層例一
$.layer({
    type : 2,
    closeBtn : false,
	shadeClose: true,
    time : 5,
    iframe : {
        src : 'http://player.youku.com/player.php/sid/XMjY3MzgzODg0/v.swf'
    },
    title : false,
    area : ['500px','300px'],
    success : function(){ //層加載成功後進行的回調
        layer.shift('right-bottom',1000); //瀏覽器右下角彈出
    },
    end : function(){ //層完全關閉後執行的回調
        $.layer({
            type : 2,
            offset : ['100px', ''],
            iframe : {
                src : 'http://sentsin.com/about/'
            },	
            area : ['960px','500px']
        })
    }
});

//iframe層例二
$.layer({
	type: 2,
	title: false,
	fix: false,
	closeBtn: false,
	shadeClose: true,
	shade: [0.1,'#fff', true],
	border : [5, 0.3, '#666', true],
	offset: ['100px',''],
	area: ['990px','500px'],
	iframe: {src: 'http://sentsin.taobao.com/'},
	success: function(){
		layer.msg('點擊層外任意處,可關閉該iframe層', 2, 9);
	}
});

//加載層
layer.load(5); //5秒後關閉

//tips層一
layer.tips('tips的樣式並不是是固定的,您可自定義外觀。', this, {
    style: ['background-color:#E227C7; color:#fff', '#E227C7'],
    maxWidth:185,
    closeBtn:[0,true] //顯示關閉按鈕
});

//tips層二
layer.tips('也能夠不要關閉按鈕', this, {guide: 1});
相關文章
相關標籤/搜索