dialog 默认无遮罩，需用 dialog::backdrop 设置 background-color 和 opacity（推荐 rgba）才能显示半透明背景；仅 showModal() 触发 ::backdrop 并模态拦截，show() 无遮罩；IE 不支持，Safari 15.4+ 才支持 showModal()。
dialog 元素默认不带遮罩，必须配合 ::backdrop
直接写 <dialog open></dialog> 只会显示一个无背景、无遮罩的原生弹窗，视觉上跟普通块级元素几乎没区别。关键点在于：遮罩层（即半透明灰黑背景）不是 dialog 自带的，而是浏览器在 dialog 处于打开状态时，自动为它生成的伪元素 ::backdrop —— 但这个伪元素默认透明度为 0，所以“看不见”。要让它显现，必须显式设置样式：
-
dialog::backdrop必须写在 CSS 中，且不能省略::backdrop伪元素 - 必须给它设
background-color和opacity（或rgba()），例如：dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); } - 如果用了
opacity: 0.5而非rgba()，会导致整个 dialog 内容也变透明（因为 opacity 会继承），这是常见误操作
IE 不支持 dialog，Chrome/Firefox/Safari（v15.4+）才可用
<dialog></dialog> 是较新的 HTML 标准，没有 polyfill 能完全模拟其行为（尤其是 showModal() 的模态拦截逻辑）。实际项目中若需兼容旧浏览器，得 fallback 到 div + 手动管理 focus/esc/tab 锁定 —— 但如果你的目标环境明确是现代浏览器（比如内部管理后台），直接用原生 dialog 反而更轻量、语义更强、键盘无障碍支持更好。
- 检测支持：可用
typeof HTMLDialogElement !== 'undefined'判断 - Safari 直到 15.4 才支持
showModal()，15.3 及更早仅支持show()（非模态，不锁背景） - 移动端 iOS Safari 对
::backdrop动画支持不稳定，避免对它做transition
showModal() 才触发 ::backdrop，show() 不会
这是最容易混淆的点：只有调用 dialog.showModal()，浏览器才会插入 ::backdrop 并阻止用户与背景交互；而 dialog.show() 仅仅是把 dialog 设为可见，它仍是普通文档流中的定位元素，背景可点击、可滚动、无遮罩。
- 使用场景决定方法选择：
showModal()用于需要强提示、防误操作的弹窗（如确认删除）；show()更适合工具提示、悬浮面板等弱干预场景 -
showModal()会自动将焦点移入 dialog，且按 Esc 或点击 backdrop 默认关闭（可被event.preventDefault()拦截） - 关闭后记得调用
dialog.close()，否则open属性仍为 true，::backdrop也不会消失
半透明遮罩的层级和尺寸由 backdrop 自动控制，别手动覆盖
dialog::backdrop 是一个全屏、fixed 定位、z-index 高于页面但低于 dialog 本身的伪元素，它的尺寸和层级由浏览器严格管理。试图用 position: fixed + top:0 手写一个遮罩层，不仅多余，还会引发 z-index 冲突或滚动穿透问题。
立即学习“前端免费学习笔记（深入）”；
- 不要给
::backdrop设width/height或inset，它天然铺满视口 - 避免在 backdrop 上加 pointer-events: none，否则点击遮罩无法关闭 dialog（除非你禁用了默认关闭逻辑）
- 如果遮罩边缘有闪烁或裁剪，大概率是 dialog 父容器有
overflow: hidden或 transform，需检查祖先元素样式
dialog 的遮罩逻辑很干净，但它的“干净”恰恰藏在细节里：伪元素、方法区分、浏览器自动聚焦、以及对祖先生效的 CSS 约束 —— 这些都不是可选配置，而是必须对齐的契约。稍一偏离（比如漏写 ::backdrop、误用 show()、或强行重置它的定位），遮罩就失效或行为异常。 
