Layui弹出层怎样在弹出时让主页面背景产生模糊效果

实现页面背景模糊效果时，必须将filter:blur()应用于稳定的根容器，并通过计数器管理多层弹窗状态，同时需处理IE/旧Edge浏览器的兼容性问题。

直接对body或html元素添加filter:blur()不会生效，因为layui的遮罩层和弹层是独立插入body末尾的兄弟节点，不会包含页面主要内容区域。

必须作用于稳定根容器（如 #app）

要实现模糊效果，必须将滤镜应用于包裹所有页面内容的容器，且该容器不能被动态移除。常见的错误是直接操作body元素，导致某些浮动组件会脱离模糊范围。

1. 确保使用唯一、静态的外层容器，如<div id="app"></div>，所有页面内容都应包含其中
2. 避免使用document.body或document.documentElement作为目标容器
3. 样式中需添加transition: filter 0.2s ease过渡效果，防止开关时出现视觉闪烁

layer.open 打开前加类，关闭后移除（需计数器防多层冲突）

当用户快速连续打开多个弹窗时，若仅通过单个class控制，关闭第一个弹窗会导致后续弹窗背景突然变清晰，这需要通过计数器管理状态。

1. 定义全局计数器：window.layerBlurCount = 0
2. 每次调用layer.open前执行：window.layerBlurCount++，然后添加模糊类
3. 在success或end回调中递减计数器，仅当计数器归零时才移除模糊类
4. 不能仅依赖layer.close(index)，需考虑用户通过其他方式关闭弹窗的情况

IE / Edge ≤17 必须降级为 opacity 遮罩

这些旧版本浏览器完全不支持filter:blur()，强行使用可能导致布局问题，需要特殊处理。

1. 优先使用CSS.supports('filter', 'blur(1px)')检测支持性
2. 兼容方案可使用UA检测：navigator.userAgent.indexOf('MSIE') > -1
3. 不支持时改用提高遮罩层opacity值的方式实现视觉降级
4. 注意iOS Safari下同时使用filter和高opacity可能导致显示异常

实现弹窗背景模糊时，需特别注意多层弹窗状态管理，即使单次调用也要考虑其他插件可能产生的影响，确保在各种操作场景下都能保持正确状态。