要实现Layui弹出层开启时页面主体高斯模糊，需作用于稳定业务根容器（如#app），用backdrop-filter实现真毛玻璃效果，并通过计数器控制类增删；不兼容时降级为filter+高透明遮罩，关闭时在end回调中恢复清晰。
要让Layui弹出层打开时页面主体内容呈现高斯模糊（毛玻璃）效果，必须绕过遮罩层直接作用于业务容器，否则blur()或backdrop-filter都会失效——因为layui的.layui-layer-shade是插入body末尾的独立节点，滤镜无法穿透它去模糊背后的真实DOM。
确认并锁定你的业务根容器
打开浏览器开发者工具，检查HTML结构，找到一个稳定、不随layer.open动态增删、且包裹全部业务内容的容器，常见如
、或
内唯一顶层div。不能选body本身——部分Layui浮动组件（如.fixbar）会脱离body流，导致模糊漏掉关键区域。若找不到明确根容器，需手动在
最内层添加：启用backdrop-filter实现真毛玻璃效果
这是现代浏览器推荐方案，只模糊背景，不糊文字和图标，视觉更干净。
方法一：CSS类控制 + JS计数器（推荐）
第一步：定义CSS样式，加到全局样式表中：
.glass-bg { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(255, 255, 255, 0.15); }
第二步：在layer.open前添加类，但仅当首次开启时才加：
window.layerGlassCount = window.layerGlassCount || 0;<br>layerGlassCount++;<br>if (layerGlassCount === 1) { document.getElementById('app').classList.add('glass-bg'); }
第三步：在layer.close回调中移除类，且仅当无任何弹窗存活时才移除：
layer.close(index);<br>layerGlassCount--;<br>if (layerGlassCount === 0) { document.getElementById('app').classList.remove('glass-bg'); }
注意：必须用-webkit-backdrop-filter前缀，Safari和部分安卓WebView仍依赖它；别把class加在.layui-layer-shade上——它背后是空白，没内容可模糊。
降级处理：IE/旧Edge用filter: blur() + 遮罩强化
IE全系、Edge ≤17不支持backdrop-filter，也忽略filter: blur()对父容器的影响，此时必须切换策略。
方法一：检测兼容性后启用blur fallback
用标准API判断：CSS.supports('backdrop-filter', 'blur(1px)')为false时，走降级路径。
方法二：执行filter模糊 + opacity遮罩双强化
给#app加blur类：.blur-bg { filter: blur(6px); transition: filter 0.2s ease; }
同时将layui遮罩层透明度提高：.layui-layer-shade { opacity: 0.85 !important; background-color: #000 !important; }
这一步很关键：单纯blur无效，必须配合深色高opacity遮罩才能模拟聚焦感；切勿同时启用blur和高opacity遮罩——iOS Safari下可能白屏或闪烁。
关闭弹窗时确保背景恢复清晰
layer.close没有内置“弹窗关闭完成”的精确钩子，必须用success回调：
layer.open({<br> content: 'xxx',<br> success: function(layero, index) { /* 打开后逻辑 */ },<br> end: function() { /* 关闭动画结束后触发，此处放移除class代码 */ }<br>});
end回调比cancel或yes更可靠，它在DOM完全销毁后执行，能避免因异步导致的类残留。
