HTML中dialog背景遮罩 dialog标签::backdrop伪元素

<dialog>默认无背景遮罩，仅showModal()触发backdrop层并支持点击关闭；::backdrop仅在showModal()后生效，Safari 15.4+支持，移动端需处理touch事件穿透问题。

dialog标签默认没有背景遮罩

HTML <dialog> 元素本身不自带模态遮罩层，点击外部区域不会自动关闭，也不会变暗背景——这是很多人误以为“用了dialog就等于弹窗”的第一坑。

真正触发遮罩效果的，是调用 showModal() 方法（而非 show()）。只有这时，浏览器才会渲染一个半透明的 backdrop 层，并把焦点限制在 dialog 内部。

• show()：纯展示，无遮罩、无焦点锁定、点击外部无反应
• showModal()：启用模态行为，自动插入 backdrop，支持 Esc 关闭、点击 backdrop 关闭（需额外处理）

::backdrop伪元素只能作用于showModal()激活的dialog

如果没调用 showModal()，::backdrop 完全不生效，CSS 里写死了也没用。它不是通用遮罩选择器，而是仅在模态上下文中由 UA 创建的匿名盒子。

常见错误是直接写 dialog::backdrop { background: rgba(0,0,0,0.5); } 却发现没变化——先检查 JS 是否调用了 dialog.showModal()。

立即学习“前端免费学习笔记（深入）”；

• 兼容性注意：::backdrop 在 Safari 15.4+ 才支持，旧版需用 dialog[open] + 自定义遮罩层模拟
• 不能设置 z-index：backdrop 层级固定在 dialog 下方、其他内容上方，强行设 z-index 无效
• 动画支持有限：部分浏览器不支持 transition 或 animation 在 ::backdrop 上

点击 backdrop 关闭 dialog 需手动监听

标准行为中，点击 backdrop 默认会关闭 dialog，但前提是 dialog 没被 event.preventDefault() 干扰，且没有阻止冒泡或禁用 pointer-events。

如果你发现点击遮罩没反应，大概率是以下之一：

• dialog 内部某个元素（比如按钮）调用了 event.stopPropagation()，导致 click 事件没冒泡到 backdrop
• CSS 中对 dialog::backdrop 设置了 pointer-events: none（显式禁用）
• JS 里监听了 click 并调用了 event.preventDefault()，但没判断目标是否为 backdrop

稳妥做法是监听 dialog 的 click 事件，检查 event.target === dialog（即点在 backdrop 区域），再调用 dialog.close()。

移动端 backdrop 点击穿透问题

在 iOS Safari 和部分安卓 WebView 中，::backdrop 对 touch 事件响应不稳定，可能出现“点了遮罩但没关闭”或“点一次没反应、点两次才关”的情况。

根本原因是 backdrop 层未正确捕获 touchstart/touchend，尤其当页面有 touch-action: manipulation 或快速滚动干扰时。

• 临时解法：给 dialog::backdrop 加 touch-action: auto
• 更稳方案：不依赖 backdrop 的原生点击，改用 pointerdown + getBoundingClientRect() 判断点击坐标是否在 dialog 外
• 别忽略 focus 管理：关闭后记得手动 focus() 回触发按钮，否则屏幕阅读器和键盘用户会迷失

backdrop 不是黑盒，它是 UA 渲染的附加工具，行为受调用方式、浏览器实现和交互细节共同约束。漏掉 showModal() 或忽略移动端 touch 处理，比样式写错更容易让整个弹窗逻辑失效。