shadeClose: false 仅禁用关闭功能，不提供视觉反馈；要实现点击变色，必须显式配置 shade（如 shade: 0.3），并在 success 回调中通过 $(layero).prev('.layui-layer-shade') 精准绑定 touchstart/click 事件动态修改背景色。
为什么 shadeClose: false 没让遮罩“变色”而是彻底没反应
很多人设了 shadeclose: false 后发现点击遮罩既不关闭、也没视觉反馈——不是配置错了，是默认的遮罩 dom 本身没有 hover 或 active 样式。layui 的 .layui-layer-shade 只负责遮挡和事件绑定，不自带点击态样式。
要实现「点击外部不关闭但变色」，本质是监听遮罩 click，然后给它加临时 class 或直接改 background/opacity。关键前提是：遮罩必须存在且可被精准选中。
-
shade必须显式声明（如shade: 0.3），否则shadeClose: false不生效，遮罩甚至不会渲染 - 不能用
$('.layui-layer-shade').on('click', ...)—— 遮罩是动态生成的，外部绑定容易漏掉或绑到旧节点 - 移动端需额外处理 touchstart + click 兼容，否则点一下没反应
如何在 success 回调里精准绑定并触发变色
每次弹层打开时，遮罩都在弹层 DOM 的前一个兄弟位置，$(layero).prev('.layui-layer-shade') 是唯一稳定获取方式。变色逻辑必须放在这里，确保只作用于当前弹层的遮罩。
示例代码（含防重复触发）：
layer.open({
type: 1,
content: '<div class="my-form">表单</div>',
shade: 0.3,
shadeClose: false,
success: function(layero, index) {
const $shade = $(layero).prev('.layui-layer-shade');
// 防止多次打开时重复绑定
$shade.off('click.shadeColor').on('click.shadeColor', function() {
$shade.css('background', '#ff6b6b'); // 点击时变红
setTimeout(() => $shade.css('background', ''), 300); // 300ms后恢复
});
}
});
- 用
.off().on()组合避免重复绑定，尤其在快速开关弹窗时 - 不要用
addClass+ CSS transition，Layui 遮罩默认无 transition，得自己补.layui-layer-shade { transition: background 0.3s }; - 如果用了自定义
skin或修改过zIndex，只要遮罩结构没动，.prev()依然有效
移动端点击变色失效？检查这三件事
iOS 和 Android 上 click 事件可能被延迟或吞掉，尤其在滚动后立刻点遮罩边缘。单纯靠 click 很容易失败。
- 必须同时监听
touchstart和click，并用e.preventDefault()阻止默认行为干扰 - 遮罩元素需有
cursor: pointer，否则部分安卓 WebView 下不触发事件 - 如果页面用了
body { overscroll-behavior: contain }或类似防回弹 CSS，可能拦截 touch 事件，临时去掉试试
更稳妥的写法：
$shade.on('touchstart.shadeColor click.shadeColor', function(e) {
e.preventDefault();
$shade.css('background', '#ff6b6b');
setTimeout(() => $shade.css('background', ''), 300);
});
变色后遮罩穿透或 z-index 错乱怎么办
变色只是表面，如果遮罩被其他浮层（比如 Ant Design 的 Modal、Element Plus 的 Dialog）盖住，用户根本点不到，自然也不会触发变色。
- 确认
.layui-layer-shade的z-index高于所有其它浮动组件，建议设为9998或更高 - 避免给遮罩加
opacity: 0或visibility: hidden—— 这会让它失去交互能力，即使背景色变了也点不动 - 如果用了 Vue/React，确保 layer 插入的 DOM 没被框架 patch 逻辑误删；初始化必须在
mounted或useEffect之后
真正麻烦的不是怎么变色，而是怎么确保那个 .layui-layer-shade 元素始终能被点到、且只属于当前弹层。所有其它操作，都建立在这个前提之上。
