《layer 弹出层》

2019独角兽企业重金招聘Python工程师标准>>>

       	
           	//信息框例一
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});

转载于:https://my.oschina.net/u/1269023/blog/198500