Layui弹出层如何实现在父窗口显示遮罩层-Layui教程-PHP中文网

遮罩只覆盖iframe而非父页，是因为layer默认将遮罩插入当前iframe的document.body，而iframe与父页dom隔离；解决需用parent.layer.open()并手动将遮罩追加至父页body，同时确保zindex足够高且不被overflow或stacking context截断。

默认情况下，layer.open() 的遮罩层（.layui-layer-shade）是插入到 body 下的同级节点，和弹窗并列；但如果你在 iframe 或嵌套上下文中调用，遮罩可能只覆盖当前 iframe，而非整个父页面——这时必须显式把遮罩挂到顶层 body 上。

为什么遮罩只盖住了 iframe 而不是整个父页

常见于后台管理系统中：主页面加载了多个 iframe 子模块，某个子模块里调用 layer.open()，结果遮罩只出现在该 iframe 内部，父页其他区域仍可点击、滚动、交互。根本原因是 layer 默认把遮罩追加到当前执行环境的 document.body，而 iframe 有自己的 document。

iframe 内的 window 和父页 window 是隔离的，document.body 指向的是 iframe 自身的 body
即使用了 parent.layer.open()，遮罩仍由 parent 的 layer 实例生成，但若未指定挂载位置，它默认仍会插入到 parent 的 document.body —— 这本身是对的；问题常出在 parent 页面存在多层嵌套或动态 DOM 移动，导致遮罩被 CSS 层级或 overflow 截断
某些 CMS 框架会把主 layout 容器设为 position: relative + overflow: hidden，遮罩虽在 body，却被父容器裁剪

如何让遮罩真正覆盖整个父窗口

核心是两步：确保遮罩插入父页 body，且不被任何父级容器的 overflow 或 stacking context 截断。

统一用 parent.layer.open() 调用，避免在 iframe 内直接调用 layer.open()
显式设置 shade: [0.3, '#000']（不能用布尔值或数字，数组格式才能触发正确渲染）

在 success 回调里手动把遮罩移出当前上下文，追加到父页 body：

success: function(layero) {
  var shade = $('.layui-layer-shade:last');
  if (parent && parent.document.body) {
    parent.document.body.appendChild(shade[0]);
  }
}

检查父页是否有容器设置了 overflow: hidden 或 transform，若有，需临时移除或改用 clip-path 替代

遮罩被父页导航栏或 fixed 元素盖住怎么办

遮罩层级不够高，或被父页创建的 stacking context 隔离，都会导致它“穿不透”导航栏。

layui手机车牌号码键盘代码

layui手机车牌号码键盘代码是一款基于jQuery跟layui制作的手机端车牌号码输入弹出键盘选择，支持新能源汽车车牌输入格式代码。

下载

遮罩默认 z-index 是 1988，而很多 .layui-header 设为 2000+，所以必须手动拉高：shade: [0.3, '#000', {zIndex: 3000}]（Layui 2.8+ 支持第三项传入对象）
如果父页用了 transform: translateZ(0) 或 filter: opacity(1)，会创建新 stacking context，此时仅调高 zIndex 无效；得确保遮罩和导航栏同属一个 context —— 最稳妥是给父页 body 加 transform: translateZ(0)，再统一调高所有关键元素的 zIndex
移动端 Safari 对 fixed + zIndex 组合兼容性差，建议加 style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;" 到遮罩元素上，绕过浏览器 bug

shadeClose 点击遮罩关闭时，为何有时关不掉弹窗

这不是遮罩没覆盖的问题，而是事件委托失效或上下文错位。

遮罩被手动移动后，layer 内部仍按原 DOM 位置绑定 click 事件，导致点击无响应

解决方案：禁用默认行为，自己监听 parent.document 的点击：

success: function(layero) {
  var shade = $('.layui-layer-shade:last')[0];
  if (shade) {
    shade.onclick = function() {
      parent.layer.closeAll();
    };
  }
}