shadeclose: false 仅在遮罩存在时生效,shade: false 会彻底移除遮罩使该配置失效;esc键、pointer-events穿透、嵌套弹层监听、msg/alert默认true等均会导致意外关闭,需针对性处理。

shadeClose: false 就够了,不用额外写逻辑。Layui 默认就是这个值,但很多人没显式声明,结果被封装层或全局配置覆盖了。
为什么写了 shadeClose: false 还是关了?
不是配置失效,而是其他机制在“代打”:
-
Esc键默认关闭弹层 —— 需加closeBtn: 0并手动拦截keydown中的Escape - 遮罩 DOM 被
pointer-events: none穿透,点到了底层按钮或链接 - 多个弹层嵌套时,下层监听了全局
click并调用了layer.close() - 用了
layer.msg或layer.alert却没传参覆盖 —— 它们内部默认shadeClose: true,必须显式写{ shadeClose: false }
shade: 0 和 shade: false 对 shadeClose 的影响
shadeClose 只在遮罩 DOM 存在时起作用:
-
shade: 0.3+shadeClose: false→ 遮罩可见,点它不关 -
shade: 0→ 遮罩 DOM 仍在(透明),shadeClose仍可生效(但点不到) -
shade: false→ 遮罩 DOM 彻底不生成,shadeClose失效(控制台静默忽略)
想彻底移除遮罩又避免误关,推荐 shade: false + shadeClose: false(后者冗余但语义明确)。
移动端点击遮罩变色/抖动等自定义行为怎么绑?
别用 $('.layui-layer-shade').on(),多层弹窗会冲突。最稳的是:
success: function(layero) {
const $shade = $(layero).prev('.layui-layer-shade');
$shade.off('click.shadeAction').on('click.shadeAction', function() {
// 执行抖动、变色、埋点等
myCustomHandler();
});
},
end: function() {
// 必须清理,否则跨弹层事件叠加
$('.layui-layer-shade').off('click.shadeAction');
}
iOS/Android 上 click 延迟高,边缘点击易失效;如需可靠响应,改用 touchstart 并加 { passive: false }。











