可靠遮罩需用position: fixed+top/left/right/bottom+rgba背景，避免transform等创建层叠上下文；点击关闭须校验e.target===overlayEl；模糊背景用backdrop-filter而非filter；dialog需检测showModal支持性。
直接用 position: fixed + z-index + background: rgba() 就能实现可靠遮罩，但多数人卡在定位失效、点击穿透或 iOS 渲染抖动上——不是样式没写对，而是层叠上下文和事件机制被忽略了。
遮罩层盖不住全屏？先查定位和尺寸写法
遮罩只盖住顶部一截、滚动后消失，基本是用了 position: absolute 或漏写了 position: fixed。iOS Safari 对 100vh 的处理也不稳定，别依赖它。
- 必须写
position: fixed（全屏遮罩）或position: absolute（局部遮罩，且父容器得设position: relative） - 尺寸推荐用
top: 0; left: 0; right: 0; bottom: 0，比width: 100%; height: 100%更稳 - 避免在父级加
transform、opacity: 0.99或filter，它们会创建隐式层叠上下文，让z-index失效 - z-index 至少设为
9999，防被第三方 CSS 覆盖
点击遮罩关闭弹窗，却点到内部也关了？目标校验没做
这是最常复现的 bug：用户点弹窗里的按钮，遮罩层监听的 click 事件冒泡上来，误触发关闭。根本原因不是事件绑定错了，而是没限定触发源。
- 遮罩层和弹窗必须同级（都挂
body下），且都用position: fixed - 监听时用
e.target === overlayEl判断，而不是overlayEl.contains(e.target)（后者会把弹窗内容也判为遮罩内） - 移动端建议用
pointerdown替代click，避开 Safari 的 300ms 延迟导致的误判 - 如果弹窗里有透明 padding 区域，可额外给弹窗内容容器加
pointer-events: auto显式声明可交互
想模糊背景？backdrop-filter 才是正解，别用 filter
filter: blur(8px) 只模糊遮罩层自己（比如上面的文字），对背后页面完全无效。真正起作用的是 backdrop-filter，但它有硬性前提。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须配合
background-color: rgba(0,0,0,0.4)（带透明度），纯transparent会让滤镜失效 - Chrome / Safari / Edge 111+ 原生支持；Firefox 默认关闭，需手动启用
layout.css.backdrop-filter.enabled，生产环境不能依赖 - iOS Safari 首次触发有渲染抖动，加
will-change: filter可缓解，但要在显示前加、隐藏后立刻移除，否则持续占 GPU - 不要给遮罩层加
transition，动画会干扰模糊生效时机
用 dialog 元素？先检测支持再决定是否降级
原生 dialog 是最省心的方案，但 Safari 15.3 及更早版本调用 showModal() 会直接报错，不能只靠 document.createElement('dialog') 判断。
- 唯一可靠检测方式：
'showModal' in HTMLDialogElement.prototype，返回true才可用 -
dialog::backdrop是伪元素，无法直接绑定事件；如需点击关闭，得监听伪元素 click（现代浏览器支持）或 fallback 到自定义遮罩层 - 旧版浏览器必须降级：手写遮罩层 +
inert属性禁用背景交互 + 手动管理焦点锁 -
dialog.open = true无效，必须用dialog.showModal()；关闭必须用dialog.close()，设open = false不会移除 backdrop
真正难的从来不是怎么写那几行 CSS，而是当遮罩在 iOS 上闪一下、在 Firefox 里不模糊、或者点弹窗按钮却关掉了整个模态框时，你能否快速定位是层叠上下文、事件冒泡还是浏览器兼容性问题——这些细节不会报错，但会卡住整个交互流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
