dialog::backdrop 遮罩默认透明，需手动设置 background-color（如 rgba(0,0,0,0.5)）并确保选择器完整、 为 直接子节点；showmodal() 才触发 backdrop，点击不自动关闭属规范行为。

showModal() 本身就会创建遮罩层，但这个遮罩是“隐形”的——它阻断交互、禁用滚动、捕获焦点，却不会自动变灰或变暗。你看到的仍是清晰背景，不是功能失效，而是没加视觉遮罩样式。

dialog::backdrop 必须手动写 CSS 才有颜色

浏览器只提供 ::backdrop 这个伪元素钩子，不给默认背景色。漏掉这行，遮罩就完全透明：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

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

• 必须写全选择器：dialog::backdrop，单独写 ::backdrop 无效
• 必须配合 position: fixed（现代浏览器已内置，但旧版 Safari 可能需要显式声明）
• 不要设 z-index：它会被忽略，层级由浏览器控制
• 别用 opacity 调半透——改用 rgba() 或 hsla()

遮罩不出现？先查是否真调用了 showModal()

show() 不产生 backdrop，open = true 更无效。只有 showModal() 触发后，::backdrop 才存在且可样式化。

• 确保 DOM 已就绪：在 DOMContentLoaded 后调用，或把 <script></script> 放在

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