现代浏览器推荐直接使用 dialog 元素实现全屏遮罩，其 showModal() 自动处理层叠、滚动禁用和 backdrop 覆盖，::backdrop 天然满屏，点击默认不关闭，Esc/Tab 键盘支持开箱即用；Safari 15.4+ 才完整支持，旧版需 fallback；z-index 失效多因父级隐式层叠上下文，可提级至 body 或加 isolation: isolate；遮罩须显式设 top/left/width/height 为 0/0/100%/100%，避免 100vw/vh 兼容问题；局部遮罩需父容器 position: relative；pointer-events 和 background 透明方式影响交互逻辑，background 应用 rgba/hsla 而非 opacity。
为弹窗添加遮罩层是前端开发中的常见需求。许多开发者习惯手动创建一个 div 元素，并为其设置 position: fixed、z-index 和精确尺寸。然而，现代浏览器原生提供了一个更高效、更健壮的解决方案——dialog 元素。利用它实现模态遮罩，不仅代码更简洁，还能自动处理焦点管理、滚动锁定等复杂交互。对于需要兼容旧版浏览器（如 IE11 或部分安卓 WebView）的项目，才需要考虑降级处理方案。
使用 dialog 元素实现全屏遮罩的最优方案
无需再手动计算视口尺寸或为层叠顺序烦恼。dialog 元素的 showModal() 方法为你封装了完整的模态行为。
- 它自动创建独立的层叠上下文，其
::backdrop伪元素默认覆盖整个可视区域，无需手动编写position: fixed和100vw/100vh。 - 交互设计更符合模态逻辑：点击遮罩背景默认不会关闭弹窗，确保了操作的严谨性。如需实现点击关闭，只需监听
dialog::backdrop的click事件并调用close()方法。 - 开箱即用的键盘与无障碍支持：
Esc键可关闭弹窗，Tab键将焦点限制在弹窗内部循环，这比手动实现更加可靠。 - 请注意浏览器兼容性：Safari 浏览器在 15.4 版本后才完全支持
showModal()。若需支持更早版本，应准备降级方案，例如使用show()并手动为背景元素添加inert属性来屏蔽交互。
z-index 失效的根源排查与解决方案
你是否遇到过遮罩层设置了很高的 z-index 却依然无法覆盖目标内容的情况？问题往往不在于数值大小，而在于父元素意外创建的隐式层叠上下文。
当父元素设置了 transform、opacity 小于 1、filter 或 position 等属性时，会形成新的层叠上下文。此时，子元素的 z-index 仅在该上下文内部有效，无法与外部元素比较。
- 排查方法：使用浏览器开发者工具的“Computed”面板，检查遮罩层与被遮盖元素的最近共同祖先，确认其是否包含上述属性。
- 临时修复：可为问题父元素添加
isolation: isolate属性，但需注意其对性能的潜在影响。 - 根本解决方案：将遮罩层元素从复杂的 DOM 嵌套中移出，直接放置在
末尾，使其与页面主要内容处于同一层级，彻底避免层叠上下文干扰。
确保遮罩层尺寸正确覆盖的必备技巧
一个常见错误是：即使为遮罩层设置了 position: fixed 和高 z-index，也可能因其高度为 0 而无法显示，尤其当其为空元素或其子元素被隐藏时。
- 最可靠的尺寸设置是：
top: 0; left: 0; width: 100%; height: 100%。尽量避免使用100vw/100vh，后者在 iOS Safari 横屏模式下可能出现滚动条兼容性问题。 - 实现局部遮罩：若遮罩仅需覆盖特定组件（如卡片），其父容器必须设置
position: relative，同时遮罩层使用position: absolute。否则，定位基准会错误地指向根元素。 - 注意：
display: block不会自动赋予元素尺寸。一个没有内容且未显式设置宽高的块级元素，其高度默认为 0。
遮罩层点击交互的设计策略
遮罩层是否应响应点击事件，取决于具体的交互设计意图。
- 纯阻挡型遮罩（如加载中状态）：保持
pointer-events: auto，并设置带透明度的背景色，如background: rgba(0,0,0,0.5)。这样既能拦截下方点击，又无需处理额外事件。 - 点击遮罩关闭弹窗：为遮罩绑定
click事件，在事件处理函数中调用stopPropagation()，防止事件冒泡触发底层元素。 - 点击遮罩外部关闭：建议监听遮罩层自身的
click事件，通过判断event.target === dialog来确认点击目标是否为遮罩背景本身，而非其内部子元素。
最后，关于背景透明度的实现：务必使用 background 属性的 alpha 通道，如 rgba() 或 hsla()。避免使用 opacity 属性，因为它会使整个元素（包括其内部所有内容）变透明，并且同样会创建新的层叠上下文，可能引发意外的布局问题。
