showModal()是使<dialog>真正生效的唯一方式；仅写标签、设open属性或调用show()均无效，因不锁背景、不响应Esc、点击遮罩无反应。常见失效原因包括DOM未就绪、元素未正确选中、父容器CSS干扰（如transform/overflow:hidden）或手动移除open属性。
showModal() 是让 <dialog> 真正生效的唯一方式；只写标签、加 open 属性或调用 show() 都不会产生模态行为——背景不锁、Esc 不关、点击遮罩无反应。
为什么调用了 showModal() 却看不到弹窗？
不是代码写错了，而是执行时机或 DOM 状态不对。常见原因有：
-
document.querySelector('dialog')返回null：脚本执行时<dialog>尚未挂载，比如放在<head>里或动态插入后没等完成就查 -
<dialog>嵌套在带transform或will-change的父容器中：Safari 下弹窗会偏移甚至完全不可见 - 手动调用了
dialog.removeAttribute('open')：虽然showModal()会自动加open，但删掉后它就“失活”了（DOM 还在，只是浏览器不渲染） - 父容器设了
overflow: hidden：把弹窗裁剪掉了，尤其在移动端容易踩坑
如何安全实现点击遮罩关闭？
原生 <dialog> 的 ::backdrop 不是真实节点，无法直接绑定事件。不同浏览器处理差异极大：
- Chrome/Edge 120+ 可靠：监听
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari 15.4–17.6 必须降级：用坐标判断，例如
const rect = dialog.getBoundingClientRect(); if (!rect.contains(e.clientX, e.clientY)) dialog.close(); - 千万别对
dialog::backdrop写onclick或addEventListener：它纯属 CSS 伪元素，根本绑不上 - 如果误用了
show()而非showModal()，压根没有 backdrop，这套逻辑直接失效
close() 后焦点没回去？这三点必须手动补
close() 只负责隐藏和重置状态，不会自动恢复用户操作流。键盘用户会卡住，这是最常被忽略的可访问性断点：
立即学习“前端免费学习笔记（深入）”；
- 必须在
close事件里手动调用触发按钮的focus()，例如triggerBtn.focus() -
dialog.returnValue在 Safari（截至 v17.6）始终为空字符串，不能用于传值，别依赖它做分支逻辑 - 表单提交用
method="dialog"时，<button value="submit">的value才会进returnValue；若加了event.preventDefault()，默认关闭行为就被拦死了
真正难的从来不是调用 showModal()，而是 Safari 下 backdrop 不可见、returnValue 不可用、焦点管理不闭环这三件事——它们不报错，但会让部分用户完全无法完成操作。
