最省事可靠的方式是直接用 元素，因其 showModal() 自动处理遮罩、禁滚动、焦点控制、z-index 和无障碍支持，无需手动干预。
直接用 元素，现代浏览器下遮罩层自动生效、无需手算 z-index、不手动禁滚动——这是最省事也最可靠的方式。
为什么 showModal() 能省掉 90% 的遮罩层调试
它不是“加了个 div”，而是浏览器原生模态行为：调用 showModal() 后，dialog::backdrop 自动覆盖整个视口，背景内容天然不可聚焦、不可点击；滚动被禁用；Esc 关闭、Tab 在弹窗内循环聚焦——全都不用 JS 拦截或 CSS 强制。
-
dialog::backdrop天然满屏，不用写position: fixed; top: 0; left: 0; width: 100vw; height: 100vh，避开100vh在 iOS Safari 中的视口计算 bug - 遮罩层和弹窗内容自动处于同一层叠上下文，
z-index不会因父容器的transform或opacity: 0.99失效 - 背景交互禁用靠的是
inert属性（由showModal()自动添加），比手动遍历 DOM 加pointer-events: none更彻底、更无障碍友好
dialog::backdrop 样式怎么写才不踩坑
伪元素 dialog::backdrop 必须显式设 background-color 才可见；只靠透明度或 opacity 不行。常见错误是写成 background: rgba(0,0,0,0.5) 却漏了 background-color 关键字，导致 Safari 15.4+ 下遮罩层完全不显示。
- 正确写法：
dialog::backdrop { background-color: rgba(0,0,0,0.6); } - 避免用
opacity控制遮罩透明度，它会把整个 backdrop 元素变透明，影响子元素继承（虽然 backdrop 没子元素，但语义错乱） - 若需毛玻璃效果，加
backdrop-filter: blur(4px)，但注意 iOS 16.4+ 和 Chrome 113+ 才稳定支持
需要兼容 Safari 15.3 及更早版本时怎么 fallback
不能只靠 dialog.show()（非模态），因为它不阻断背景交互。必须手动补上 inert 和滚动锁定。
- 检测支持：
if (!('showModal' in HTMLDialogElement.prototype)) - fallback 逻辑：调用
dialog.show()后，立即执行document.body.setAttribute('inert', '')并保存当前scrollY，再设document.body.style.overflow = 'hidden' - 关闭时恢复
scrollY并移除inert，否则页面可能卡死在顶部 - 别忘了监听
dialog::backdrop的 click 事件来 close，因为旧版不支持默认点击关闭
响应式弹窗内容居中和动画怎么不破坏遮罩逻辑
遮罩层本身是 dialog::backdrop，它不参与内容布局；真正要响应式的，是 内部的 .modal-content 容器。
- 居中推荐用
display: grid; place-items: center;配合min-height: 100vh，比transform: translate(-50%, -50%)更稳，不受父级transform干扰 - 淡入动画加在
dialog[open]上，而不是dialog::backdrop—— 后者不支持 transition - 小屏适配重点在
max-width和padding，不是改width: 100%；用@media (max-width: 480px)调整.modal-content尺寸即可，遮罩层仍由 backdrop 全权负责
真正麻烦的从来不是“怎么盖一层”，而是“怎么确保它盖得严实、盖得无障碍、盖得不随 viewport 变形”—— 把这些都封装进标准里了，别绕开它去手写 overlay div。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
