先来个发生错误的截图:
弹窗被遮罩遮住,无法操作,弹窗代码如下
<script>
function dialog(){
layer.open({
type: 1,
title: "请选择",
//area: ['520px', '395px'],
shadeClose: true,
//skin: 'yourclass',
content: $("#dialog"),
btn: ['确定','取消'],
yes: function(index, layero){
layer.msg("确定", {icon: 1});
}
,btn2: function(index, layero){
layer.msg("取消");
//return false 开启该代码可禁止点击该按钮关闭
}
,cancel: function(){
//右上角关闭回调
layer.msg("取消2");
//return false 开启该代码可禁止点击该按钮关闭
}
});
}
</script>
<div id="dialog">
<form class="layui-form" action="" >
<div class="layui-form-item" pane="">
<label class="layui-form-label">原始复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
</div>
</div>
</form>
</div>
看了官方说法是由于body样式影响,我在这个页面不是放在body里面的,但是由于用的是layui单页版,每个页面都是套在主页面里面的,所以还是在body里面。
将layui open 里面再加一个方法:
success:function(layero){
var mask = $(".layui-layer-shade");
mask.appendTo(layero.parent());
//其中:layero是弹层的DOM对象
},
目的是将 弹层的遮罩DOM元素和弹层元素设置在同一层,
具体代码如下:
layer.open({
type: 1,
title: "请选择",
shadeClose: true,
content: $("#dialog"),
btn: ['确定','取消'],
success:function(layero){
var mask = $(".layui-layer-shade");
mask.appendTo(layero.parent());
//其中:layero是弹层的DOM对象
},
yes: function(index, layero){
layer.msg("确定", {icon: 1});
}
,btn2: function(index, layero){
layer.msg("取消");
//return false 开启该代码可禁止点击该按钮关闭
}
,cancel: function(){
//右上角关闭回调
layer.msg("取消2");
//return false 开启该代码可禁止点击该按钮关闭
}
});
仅做记录用,如有雷同,不甚荣幸