layui.use(['layer', 'form'], function(){
var layer = layui.layer,form = layui.form;
layer.open({
id:'add',//设置该值后,不管是什么类型的层,都只允许同时弹出一个。一般用于页面层和iframe层模式
title:'标题',//设置弹出框上部标题
skin: 'none',//layui-layer-molv layui-layer-lan layui-layer-rim
type: 2,//0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
content: 'http://www.baidu.com',//不想让iframe出现滚动条,可以content: ['http://sentsin.com', 'no']
area: ['500px', '300px'],//弹窗的长宽 默认auto时 maxWidth - 最大宽度 maxHeight - 最大高度
offset: 'auto',//默认坐标,即垂直水平居中 默认auto
shade:0.3,//遮罩层透明度 0-1 默认0.3
shadeClose:true,//是否点击遮罩层关闭弹窗 默认false
closeBtn:1, //右上角关闭按钮样式 一共两种分别为1 2 默认1
btn: ['bt1', 'bt2'], //按钮文字
btnAlign: 'r',//r按钮右对齐 l按钮左对齐 c按钮居中对齐 默认r
btn1: function(index, layero){
//按钮【bt1】的回调
alert(1);
},
btn2: function(index,layero){
//按钮【bt2】的回调
alert(2);
return false //开启该代码可禁止点击该按钮关闭
},
time: 0,//自动关闭时间 1000=1秒 默认0
anim:0,//弹出动画,目前anim可支持的动画类型有0-6 如果不想显示动画,设置 anim: -1 即可。 默认0
maxmin:true,//该参数值对type:1和type:2有效。最大最小化按钮。 默认false
fixed:true,//即鼠标滚动时,层是否固定在可视区域 默认true
resize:true,//是否允许在弹层右下角拖动来拉伸尺寸 默认true
scrollbar:true,//是否允许浏览器出现滚动条 默认true
zIndex:19891014,//层叠顺序 默认:19891014(贤心生日 0.0)
success: function(layero, index){//层弹出后的成功回调方法
//console.log(layero, index);
alert('弹出成功');
},
yes: function(index,layero){//确定按钮回调方法
//do something
alert('确定按钮');//如果设定了yes回调,需进行手工关闭
},
cancel: function(index, layero){//右上角关闭按钮触发的回调,两个参数,分别为:当前层索引参数(index)、当前层的DOM对象(layero)
if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
layer.close(index);
}
return false;
}
});
})
layui所有组件的官方文档网址https://www.layui.com/doc/modules/layer.html