设 shade: false 彻底不生成遮罩 dom,推荐优先使用;shade: 0 仍生成透明遮罩并拦截点击,需手动处理 pointer-events 才能避免误操作。

背景变黑是遮罩层(.layui-layer-shade)在起作用,不是弹窗本体的问题;直接设 shade: false 或 shade: 0 即可移除,但二者行为有关键差异,选错会导致交互异常。
为什么设了 shade: 0 还是点得中底部元素
因为 shade: 0 并非“删除遮罩”,而是创建一个透明度为 0 的 .layui-layer-shade 元素——它依然存在、占位、拦截鼠标事件。但 Layui 在该值下会自动解除对 document.body 的 pointer-events: none 锁定,导致底层可点。这不是 bug,是设计逻辑。
-
shade: false才是彻底不生成遮罩 DOM,推荐优先使用 - 若必须用
shade: 0,需手动补document.body.style.pointerEvents = 'none'(并在end中恢复) - 移动端 Safari 下,
pointer-events: none对原生<select></select>和软键盘触发的<input>可能失效,需额外监听touchstart阻止
shadeClose 设为 true 会导致点击变黑区域关闭弹窗吗
会,但前提是遮罩层实际存在且可交互。而 shade: false 时,shadeClose 完全无效(无遮罩可点);shade: 0 时,虽然遮罩“不可见”,但它仍响应点击——此时若 shadeClose: true,点黑区就会关窗。
- 默认值就是
false,不写这一项 = 已禁用点击关闭 - 常见翻车:配置里残留了
shadeClose: true却忘了删,结果用户点“空黑区”意外关窗 - 大小写敏感:
shadeClose不是shadeclose或shade_close,写错等于没配
弹窗本体阴影和遮罩层是两回事,别混淆
背景变黑只由 shade 控制;弹窗自身带的灰边/阴影(.layui-layer 的 box-shadow)是另一套机制,不影响黑底。
- 设
shade: false后背景不黑了,但弹窗边缘仍有阴影?那是boxShadow没关,和遮罩无关 - Layui ≥ 2.8 可配
boxShadow: ''+border: [0]彻底清空弹窗本体阴影 - 老版本只能靠
skin加!important覆盖,但容易被 layer 动态插入的内联样式覆盖
真正麻烦的是 iframe 嵌套场景:遮罩和弹窗可能不在同一 DOM 层级,导致遮罩“盖不住”弹窗或误盖其他内容。这时候光调 shade 没用,得进 success 回调手动把遮罩节点挂到弹窗父容器下,并显式设高 zIndex —— 这个细节,90% 的人第一次遇到时都会卡住。











