layui dom弹窗被遮住无法操作的问题

先来个发生错误的截图：

弹窗被遮罩遮住，无法操作，弹窗代码如下

<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 开启该代码可禁止点击该按钮关闭
              }
        });

 

                                                                            仅做记录用，如有雷同，不甚荣幸