元素默认无遮罩层，需用dialog::backdrop伪元素手动添加；它仅在showmodal()调用后生效，需配合fixed定位和背景色，且ie及旧版safari不支持。

dialog 元素默认不带遮罩层

HTML <dialog></dialog> 原生元素本身没有「模态遮罩层」（即背后的半透明灰色蒙版），它只控制自身显示/隐藏和焦点行为。浏览器实现中，showModal() 会自动阻止底层交互，但视觉上不会添加任何 backdrop —— 这不是 bug，是规范设计如此。

所以你看到页面内容依然清晰可见、无灰度覆盖，不是样式没生效，而是根本没这层 DOM 或默认样式。

用 ::backdrop 伪元素手动加遮罩

::backdrop 是唯一被标准支持的、专用于 <dialog></dialog> 模态状态下的遮罩层样式钩子。它只在 showModal() 调用后存在，且必须配合 position: fixed 和显式背景色才能生效。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• ::backdrop 不是子元素，不能用 JS 查询或操作，只能通过 CSS 控制外观
• 必须写全选择器：dialog::backdrop，单独写 ::backdrop 无效
• 若遮罩不出现，请检查是否漏了 dialog.showModal()（而非 show()）
• 常见写法：

  dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }

IE 和旧版 Safari 不支持 dialog 和 ::backdrop

Firefox 从 91+、Chrome 37+、Edge 79+ 支持 <dialog></dialog> 和 ::backdrop；Safari 直到 15.4 才开始支持 ::backdrop，且早期版本仅支持 showModal() 无遮罩。IE 完全不支持。

如果你需要兼容 Safari

+ JS 控制，原生方案此时不可靠。

z-index 和 stacking context 容易踩坑

::backdrop 默认渲染层级低于 <dialog></dialog>，但高于页面其他内容。不过一旦父容器有 transform、opacity 或 <code>will-change，就可能创建新的 stacking context，导致遮罩被盖住。

• 最稳妥做法：确保 <dialog></dialog> 是 的直接子节点
• 避免在 <dialog></dialog> 外层套有 transform 的 wrapper
• 遮罩层级由浏览器控制，不要给 ::backdrop 设 z-index —— 它会被忽略

实际能用，但得盯住浏览器版本和父级样式。别指望它像 jQuery UI 那样开箱即用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！