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