layer弹框当content为DOM时被遮罩的解决方法

博客内容讲述了在使用layui弹窗插件时遇到的问题,即当弹层内容是DOM元素且不在body根节点下时,遮罩会遮挡全屏。解决方案是在弹层成功加载后,将遮罩DOM元素移动到与弹层同一级,以确保正确显示。通过调整遮罩的层级关系,解决了遮罩和弹层的显示问题。
摘要由CSDN通过智能技术生成

因为layui官网说 如果弹层的内容content是某个DOM元素的话,要放在body的根节点下。不能放在div里面了。

所以如果不在body根目录下的话会导致遮罩遮挡全屏,因为最后生成的遮罩DOM元素的位置是body的子级,所以知道弹层的DOM要和遮罩的DOM 要在同一层。
如图:

所以这里再弹层的success的事件里面进行了处理,将遮罩的DOM位置挪动了一下,和弹层DOM元素同一级,代码如下:

var ht = null
table.on('tool(orderList)', function (obj) {
    selectData = obj.data;
    var layEvent = obj.event;
    if (layEvent == 'delete') {   //表格按钮名
        console.log( selectData.id)
        ht=layer.open({
           type: 1,
           shade: 0.3,
           title: selectData.id+"合同", //不显示标题
           area: ['445px', '560px'],
           shadeClose:true,
           content: $('.tableBox')
           ,success:function(layero){
                var mask = $(".layui-layer-shade");
                mask.appendTo(layero.parent());
                //其中:layero是弹层的DOM对象
           }
       });
    }
}
layer.close(ht)

给弹框定义名称,关闭时可使用layer.close(弹框变量名)

转截g

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值