layer.open全屏遮盖失效的主因是遮罩层仅作用于当前iframe或document，无法跨iframe影响父页面；正确做法是由父页面统一管理弹层，子页面通过postmessage通信触发，确保shade渲染在父级dom且z-index高于所有元素。
layer.open 全屏遮盖失效的常见原因
默认情况下 layer.open 的遮罩层（shade）只覆盖当前 iframe 或当前 document 视口，如果父页面用了 iframe 加载子页面，而你在子页面里调用 layer.open，遮罩层只会盖住子页面 iframe 区域，父页面其他部分依然可点可操作。
根本原因是：遮罩层 DOM 被 append 到当前页面的 document.body，而 iframe 内的 document 是隔离的，无法跨 iframe 影响父级 DOM。
从子页面控制父页面 layer 遮罩层的正确做法
必须让遮罩层渲染在父页面的 document 中，而不是子页面自己的 body。有两条路径：
- 如果父页面已引入 Layui 且已初始化过 layer 模块，子页面可通过
window.parent.layer调用父页面的 layer 实例 - 如果父页面没加载 Layui，子页面不能强行注入，否则可能冲突或报错
推荐做法是统一由父页面管理弹层：
- 子页面通过
window.parent.postMessage发送打开弹层的指令（含参数） - 父页面监听
message事件，收到后调用自身的layer.open - 弹层内容可设为
content: ['xxx.html', 'iframe']，指向子页面 URL，实现“子页面内容、父页面遮罩”
示例（子页面触发）：
window.parent.postMessage({
type: 'OPEN_LAYER',
options: {
title: '编辑表单',
content: '/sub/edit.html',
area: ['80%', '90%'],
shade: 0.8
}
}, '*');
直接调用 window.parent.layer.open 的前提和风险
能用 window.parent.layer.open 的前提是：
- 父页面已执行
layui.use('layer')且未禁用跨域访问（同源） - 父页面未重命名
layer变量（比如赋值给了window.myLayer） - 子页面与父页面协议、域名、端口完全一致（否则跨域，
window.parent.layer读不到）
常见错误现象：Cannot read property 'open' of undefined，说明父页面 layer 未就绪或跨域被拦截。
不建议在子页面做 layui.use('layer', function(){...}) 后再调用 window.parent.layer —— 这会重复加载 Layui，容易引发模块冲突或 layer 实例错乱。
shade 层穿透问题与 z-index 调整
即使遮罩层成功渲染到父页面，仍可能出现点击穿透（遮罩下按钮还能响应），这通常是因为：
- 父页面某些元素设置了
position: relative+z-index过高（比如 > 1989） - Layui 默认 shade z-index 是 1989，弹层主体是 1990
- 若父页面框架（如 Vue Router View、Ant Design Layout）动态插入了更高 z-index 的 DOM，就会压住 shade
临时解决：在父页面全局样式中加
.layui-layer-shade { z-index: 9999 !important; }
但更稳妥的是统一管理 z-index 层级，避免硬编码覆盖。
真正全屏遮盖的关键不在子页面怎么写 open，而在谁负责渲染、在哪渲染、z-index 是否真正高于所有兄弟节点。跨 iframe 场景下，layer 本质是个“单页应用级”组件，它不天然支持分布式遮罩。
