Layui 弹出框

需要加载模块:layer ,详细参考:http://layer.layui.com/

jquery+layer: http://layer.layui.com/hello.html

模块化使用:

layui.use('layer', function(){
var layer = layui.layer;

layer.msg('hello');
});


image.png

弹出框类型:type

0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)

弹出框标题:title

title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false

弹出框内容:content

/!*
如果是页面层
/
layer.open({
type: 1,
content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
type: 1,
content: ('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响 }); //Ajax获取.post('url', {}, function(str){
layer.open({
type: 1,
content: str //注意,如果str是object,那么需要字符拼接。
});
});
/!

如果是iframe层
/
layer.open({
type: 2,
content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
});
/!

如果是用layer.open执行tips层
*/
layer.open({
type: 4,
content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

弹出框样式:内置的有:layui-layer-lanlayui-layer-molv

/单个使用
layer.open({
skin: 'demo-class'
});
//全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高
layer.config({
skin: 'demo-class'
})
//CSS
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}

加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域。

弹出框大小:area

在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,你可以area: ['500px', '300px']

弹出框位置:offset

image.png

图标:icon

image.png

弹出框按钮:btn

信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: '我知道了',当你要定义两个按钮时,你可以btn: ['yes', 'no']。当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。如:
//eg1
layer.confirm('纳尼?', {
btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
,btn3: function(index, layero){
//按钮【按钮三】的回调
}
}, function(index, layero){
//按钮【按钮一】的回调
}, function(index){
//按钮【按钮二】的回调
});

//eg2
layer.open({
content: 'test'
,btn: ['按钮一', '按钮二', '按钮三']
,yes: function(index, layero){
//按钮【按钮一】的回调
}
,btn2: function(index, layero){
//按钮【按钮二】的回调

//return false 开启该代码可禁止点击该按钮关闭

}
,btn3: function(index, layero){
//按钮【按钮三】的回调

//return false 开启该代码可禁止点击该按钮关闭

}
,cancel: function(){
//右上角关闭回调

//return false 开启该代码可禁止点击该按钮关闭

}
});

按钮排列

image.png

关闭按钮:closeBtn

image.png

遮罩

image.png

自动关闭time

image.png

弹出框动画anim

image.png

maxmin

image.png
image.png

image.png

success:弹出框成功的回调

layer.open({
content: '测试回调',
success: function(layero, index){
console.log(layero, index);
}
});

yes:确认按钮回调

layer.open({
content: '测试回调',
yes: function(index, layero){
//do something
layer.close(index); //如果设定了yes回调,需进行手工关闭
}
});

关闭按钮回调。如果不想关闭,return false即可

cancel: function(index, layero){
if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
layer.close(index)
}
return false;
}

layer.config 弹出框全局

image.png

layer.alert 普通信息框

image.png

layer.confirm 询问框

image.png

layer.msg提示框

image.png

layer.load 加载层

image.png

tips

image.png
image.png

image.png

image.png

image.png

image.png

image.png

image.png

你可能感兴趣的:(Layui 弹出框)