shadeClose设为false可禁用点击遮罩关闭功能,但仅在shade有效(如shade:0.3)时生效;shade:false或shade:0时遮罩不存在,shadeClose无效。
shadeClose 设为 false 是最直接的开关
默认情况下,shadeclose 就是 false,但很多人没显式写出来,结果被其他配置(比如全局重写、二次封装函数)覆盖了。只要确保传入 shadeclose: false,点击遮罩层就不会触发关闭——这是 layer 内置逻辑,无需额外拦截事件。
注意:shadeClose 只在 shade 有效时起作用;如果 shade: false 或 shade: 0,遮罩 DOM 根本不存在,自然也点不到、关不了。
-
shade: 0.3+shadeClose: false→ 遮罩可见,但点它不关弹层 -
shade: false+shadeClose: true→ 无效,因为没遮罩可点 - 封装过 layer 的项目,要检查是否在统一调用处强制设了
shadeClose: true
为什么点了遮罩还是关了?常见干扰项
不是 shadeClose 失效,而是别的机制在“代打”:
- 用户按了
Esc键:Layer 默认响应Esc关闭,和遮罩无关,需加closeBtn: 0+ 手动禁用键盘事件(如keydown中e.key === 'Escape' && e.preventDefault()) - 遮罩层被其它 CSS 覆盖或穿透:比如父容器有
pointer-events: none,导致点击穿透到底层,误触了关闭按钮 - 多个弹层嵌套时,上层
shadeClose: false,但下层弹层监听了全局 click 并主动layer.close(),造成“点哪都关”假象 - 使用了
layer.msg或layer.alert等快捷方法,它们内部默认启用shadeClose: true,必须显式传参覆盖
layer.msg / layer.alert 怎么关掉点击遮罩关闭
快捷方法不继承你全局 layer 配置,每个都得单独设:
layer.msg('提示', { shadeClose: false })layer.alert('警告', { shadeClose: false })layer.confirm('确认?', { shadeClose: false })
特别注意:layer.msg 还有 time 参数影响行为——若 time: 0(永不自动关闭),又没关 shadeClose,就真变成“点遮罩才关”,容易误以为是 bug。实际是预期行为,只是不符合当前需求。
shade: 0 和 shadeClose 的关系别搞混
shade: 0 是隐藏遮罩视觉+移除遮罩 DOM;shadeClose 是控制“点击那个 DOM 是否关闭”。两者不是同一维度:
- 想保留遮罩(哪怕透明)、只禁点击关闭 → 用
shade: 0.01+shadeClose: false - 想彻底不要遮罩、也不让点空白关 → 用
shade: false+shadeClose: false(后者其实冗余,但写上更明确) -
shade: 0后再设shadeClose: true没意义,控制台会静默忽略
真正难的是 iOS Safari 下 pointer-events: none 对表单控件失效,或者多弹层时 body 锁定状态被覆盖——这些不会报错,但交互会悄悄漏掉。别只测 Chrome,真机点两下遮罩就知道有没有坑了。


















