应给页面根容器（如#app）动态添加filter类实现模糊，而非作用于body；需用计数器管理多层弹窗的blur状态，并为IE/旧Edge提供opacity遮罩降级方案。
layer.open 里直接加 CSS filter 会失效？
因为 Layui 的弹出层（layer.open）默认把遮罩层（.layui-layer-shade）和内容层（.layui-layer）都放在 body 最末尾，且遮罩层是独立 DOM 节点，不包裹页面主体。你给 body 或 html 加 filter: blur(4px)，只会模糊它自己，不会影响背后的真实页面内容——因为“背后”在视觉层级上其实被遮罩盖住了，或者根本没被渲染进同一 stacking context。
真正生效的模糊必须作用于「页面主体容器」
你需要一个稳定、包裹全部业务内容的外层容器（比如 #app 或 .wrapper），并在 layer 弹出时给它加 filter，关闭时移除。否则滤镜不是没效果，就是连弹窗自己也被模糊了。
实操建议：
- 确认你的页面有一个唯一、不随 layer 变动的根容器，例如：
<div id="app">...</div> - 弹出前给它加类：
document.getElementById('app').classList.add('blur-bg') - 定义样式：
.blur-bg { filter: blur(6px); transition: filter 0.2s ease; } - layer 关闭回调里务必清除：
layer.close(index); document.getElementById('app').classList.remove('blur-bg'); - 别用
body做载体——某些 UI 框架或 Layui 自身的浮动元素（如.layui-fixbar）可能脱离body流，导致模糊漏掉
IE 和旧版 Edge 不支持 filter？得降级处理
filter: blur() 在 IE 全系、Edge ≤17 中完全无效，会直接忽略。如果你的用户还有这类环境，强行加 filter 不仅没效果，还可能因样式 cascade 导致布局错位。
稳妥做法是检测支持性再启用：
- 用
CSS.supports('filter', 'blur(1px)')判断（现代浏览器） - 或简单 UA 检测：
navigator.userAgent.indexOf('MSIE') > -1 || navigator.userAgent.indexOf('Trident') > -1 - 不支持时，改用半透明深色遮罩 + 提高
.layui-layer-shade的opacity（比如0.85），视觉上也能强化「聚焦弹窗」感 - 注意：不要同时开
filter和高 opacity 遮罩，iOS Safari 下可能触发渲染异常（白屏或闪烁）
layer 有多个实例时，blur 状态容易混乱
比如用户快速连续打开两个 layer，第一个还没关，第二个又给 #app 加了 blur-bg；关闭其中一个时如果没计数，就会提前移除 class，导致背景突然清晰——而另一个弹窗还在。
解决方法很简单：
- 用一个全局计数器：
window.layerBlurCount = 0 - 每次
layer.open前执行：window.layerBlurCount++，然后if (window.layerBlurCount === 1) addClass - 在所有
layer.close、layer.closeAll、甚至layer.msg等自动关闭场景的回调里做window.layerBlurCount--，并检查是否归零再removeClass - 别依赖
layer.ready——它只管初始化，不管关闭逻辑
