必须给页面根容器（如#app）加filter: blur()才生效，因Layui遮罩层是独立插入body末尾的DOM节点，滤镜作用于自身无法模糊背后内容；需用计数器管理多层状态，并为IE/旧Edge降级为opacity遮罩。
给页面根容器加 filter: blur() 才生效，不是 body
直接给 body 或 html 加 filter: blur(6px) 没用——layui 的遮罩层 .layui-layer-shade 是独立插入到 body 末尾的 dom 节点，它盖在真实内容之上，而滤镜只作用于自身渲染区域，根本“看不到”背后的业务内容。
真正起效的位置，必须是你那个包裹全部业务的稳定容器，比如：<div id="app"></div> 或 <main class="wrapper"></main>。弹出前加类、关闭后移除，才是可控路径。
- layer 打开前：
document.getElementById('app').classList.add('blur-bg') - 定义样式：
.blur-bg { filter: blur(6px); transition: filter 0.2s ease; } - layer 关闭回调里必须执行：
document.getElementById('app').classList.remove('blur-bg')
多个 layer 实例共存时，要用计数器防误删
用户快速连点两次 layer.open，第一个还没关，第二个又触发了加 blur-bg；如果关闭其中一个就无条件移除类，背景会突然变清晰，而另一个弹窗还在——视觉断裂，体验崩坏。
解决方式极简：用全局变量计数，仅当计数归零才移除类。
- 初始化：
window.layerBlurCount = 0 - 每次
layer.open前：window.layerBlurCount++，然后if (window.layerBlurCount === 1) addClass - 每次
layer.close后：window.layerBlurCount--，然后if (window.layerBlurCount === 0) removeClass
IE/旧 Edge 不支持 filter: blur()，得降级为深色遮罩
filter: blur() 在 IE 全系、Edge ≤17 中完全被忽略，不仅无效，还可能因样式 cascade 导致布局错位或文字发虚。
别靠 UA 猜，用标准检测更稳：
- 现代判断：
CSS.supports('filter', 'blur(1px)') - 兼容 fallback：
navigator.userAgent.indexOf('MSIE') > -1 || navigator.userAgent.indexOf('Trident') > -1 - 降级方案：不启用 blur，改为提高
.layui-layer-shade的opacity（如0.85），并配深色背景（#000）强化聚焦感
注意：iOS Safari 下同时开 filter 和高 opacity 遮罩，可能触发白屏或闪烁，二者不可共存。
别混用 filter 和 backdrop-filter
你看到的「毛玻璃」效果，在现代浏览器里更推荐用 backdrop-filter: blur(6px) ——它专为“透过元素看背后”设计，不会模糊自身内容。但 Layui 弹层结构决定了它无法直接套用：因为 .layui-layer 和 .layui-layer-shade 都是兄弟节点，没有“背后”可言。
所以当前场景下，backdrop-filter 基本不可用；强行在 .layui-layer 上设它，只会模糊其父容器（通常是 body），依然漏掉浮动组件（如 .layui-fixbar）。
真正要落地，还是得回到「操作根容器 + filter」的老办法，再辅以计数与降级——看似原始，却是目前最可靠、覆盖最全的路径。
