先来个发生错误的截图：
 
弹窗被遮罩遮住，无法操作，弹窗代码如下
 
<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 开启该代码可禁止点击该按钮关闭
               }
         });
 
 
 
                                                                            仅做记录用，如有雷同，不甚荣幸
 
 
 
 

算是记录一个坑吧
 
引用layui时碰到DOM操作table表头的bug。正常思路是在页面加载结束后操作页面元素
 
 
而表头是在页面加载后Layui 再次渲染后的结果，以至于页面加载后不能直接用DOM操作表头内的元素
 
正确做法是将操作写在table.render中的回调函数done内
 

    layui.layer.open({
        type: 2,//Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加 载层）4（tips层）,
        title: '选择组织机构',   //标题
        area: ['1000px', '400px'],   //宽高
        shade: 0.4,   //遮罩透明度
        content: '{:url("ServiceCategory/role")}',//支持获取DOM元素
        btn: ['确定', '取消'], //按钮组
        scrollbar: false ,//屏蔽浏览器滚动条
        yes: function(index,layero){
            var body = layer.getChildFrame("body",index);//绑定父子之间的关系，用于数据传递，缺少则无法传递
            var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象
            //调用子页面的方法，将父页面的值作为参数传递过去
            var data = iframeWin.callback();
            console.log(data)
        },
        btn2: function(){
            //layer.alert('aaa',{title:'msg title'});  点击取消回调
            layui.layer.msg('bbb');//layer.closeAll();
        }
    });

弹出层
 
//源码 西郊 C:\Users\Administrator\Desktop\4.1test\views\business\user\agentEditcopy.html
 
//放在table标签后面
<script type="text/html" id="barTool">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>  //edit理解用来做事件的标记
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
 </script>
//js
          layui.use('table', function() {
            var table = layui.table;
            //工具条事件
            table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                objdata = data;
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                switch (obj.event) {
                    case 'edit':
                        layer.open({
                            type: 2,
                            title: '编辑',
                            area: ['98%', '98%'],
                            content: ['./userEditcopy.html?status=0'], //要打开的页面的地址 再给他一个自定义状态
                            maxmin: true,
                            success: function(layero, index) {
                                console.log(layero, index);
                                console.log('layero, index');
                            }
                        })
                        break;
                    case 'del':
                        layer.confirm('真的删除行么', function(index) {
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                            //向服务端发送删除指令
                        });
                        break;
                }
            });
        })
  
//在 content: ['./userEditcopy.html?status=0']这个子页面
	//先拿到父页面当前行的数据 注意一定是全局变量才能拿到
	var data = parent.objdata;
	//再回显数据到子页面
        $('document').ready(function() {
            //文本回显
            $('#id').val();
            //图片回显
            $("#id").attr("src", data.id);
            //下拉框选项回显 
        })
        
 
 
审核操作
 
//HTML
    <!-- 操作按钮 -->
    <div style="display: none" id="barTool">
        <!-- 审核 -->
        {{# if(d.checkStatus == 1){ }}
        <a permission="" class="layui-btn layui-btn-xs" lay-event="notice">审核</a> {{# }else{ }}
        <a permission="" class="layui-btn layui-btn-xs layui-btn-disabled">审核</a> {{# } }}
    </div>
         
//js         
         //工具条事件
     table.on('tool(categories)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    var data = obj.data; //获得当前行数据
                    objdata = data;
                    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                    switch (obj.event) {
                        case 'edit':
                            layer.open({
                                type: 2,
                                title: '编辑',
                                area: ['95%', '95%'],
                                content: ['./goodsEdit.html'],
                                maxmin: true,
                                success: function(layero, index) {
                                    console.log(layero, index);
                                    console.log('layero, index');
                                }
                            })
                            break;
                        case 'notice':
                            // 调用审核接口函数
                            //弹出审核的层
                            layer.confirm('通过审核吗？', {
                                btn: ['通过', '不通过'] //可以无限个按钮
                                    ,
                            }, function(index, layero) {
                                //按钮【按钮一】的回调
                                //商品id
                                console.log('data');
                                console.log(data);
                                var ditemId = data.ditemId;
                                review(2, ditemId);

                            }, function(index) {
                                //按钮【按钮二】的回调
                                var ditemId = data.ditemId;
                                review(3, ditemId);
                            });

                    }
                });
// 审核接口
        function review(checkStatus, itemId) {
            $.ajax({
                    url: http + '/adminItem/adminCheckItem',
                    data: {
                        checkStatus: checkStatus, //审核状态 2=审核通过 3=审核不通过
                        itemId: itemId, //商品id
                    },
                    success: function(res) {
                        console.log('res');
                        console.log(res);
                        // successService(res, null, null);
                        if (res.status == 'success') {
                            getData();
                        } else {
                            // successService(res, null, null);
                        }

                    }
                })
                // break;
        }