showmodal() 是激活 模态行为的唯一方法；未调用则无弹窗、无背景锁定、无 esc 响应、无自动聚焦；常见失效原因包括 dom 未就绪、动态渲染未等待挂载、open 属性被手动删除、父容器 css 干扰（如 transform/overflow:hidden），且 safari 存在 ::backdrop 点击不可靠、returnvalue 为空、焦点不自动恢复等兼容性问题。
showModal() 是让 <dialog></dialog> 真正成为模态框的唯一开关；不调用它，弹窗不会出现、不锁背景、不响应 Esc、也不聚焦——不是“效果不好”，而是根本没启动。
为什么调用了 showModal() 还是看不到弹窗？
最常见原因不是语法错，而是 DOM 状态或执行时机不对：
- 脚本在
DOMContentLoaded前执行，document.querySelector('dialog')返回null，报错Cannot read property 'showModal' of null -
<dialog></dialog>是动态插入的（比如 React/Vue 渲染后），但你没等它挂载完成就调用了方法 - 手动删了
open属性：showModal()会自动加，但删了又不重调，DOM 就卡在“非激活态” - 父容器有
transform、will-change或overflow: hidden，尤其在 Safari 中会导致弹窗错位、裁剪甚至完全不可见
点击遮罩层（::backdrop）为什么不关闭？
这不是 bug，是规范行为：原生 <dialog></dialog> 不定义“点击遮罩关闭”的默认逻辑，::backdrop 是纯样式伪元素，无法绑定事件或保证事件冒泡到 dialog 元素。
- Chrome/Edge 120+ 可靠支持：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–17.6 必须降级：用坐标判断，例如
e.clientX - 千万别写
dialog.addEventListener('click', () => dialog.close())—— 这会让点内部按钮也关窗 - 如果用了
show()，压根没有::backdrop，这段监听完全无效
关闭后焦点没回去，键盘用户卡住了怎么办？
close() 不会自动把焦点还给触发按钮，这是最容易被忽略的可访问性断点：
- 必须手动调用
triggerBtn.focus()（比如打开弹窗的那个<button></button>） - 若触发源不止一个，建议存个引用：
const trigger = event.target; dialog.showModal(); ... dialog.addEventListener('close', () => trigger.focus()); -
dialog.returnValue在 Chrome/Firefox/Edge 中可用（如dialog.close('confirmed')），但 Safari（v17.6）始终返回空字符串，不能用于传值 - 按 Esc 关闭时会触发
close事件，但你不监听就收不到 —— 必须显式写dialog.addEventListener('close', handler)
多个弹窗要“层叠显示”？别试 showModal() 连续调用
浏览器任意时刻只允许一个元素处于顶层（top layer），第二次调用 showModal() 必然失败，报错 DOMException: The element is already in a top layer —— 这和 z-index、CSS、DOM 结构都无关。
-
show()也不能实现真正层叠：它不进顶层、不加::backdrop、Tab 键仍可穿透到底层页面 - 可行方案只有两个：一是复用单个
<dialog></dialog>，用 JS 动态替换内容并维护状态栈；二是改用<div role="dialog" aria-modal="true"> 手写弹层，自己管 <code>inert、焦点、遮罩点击和滚动锁定 - 注意 Safari 17.6 对
transform容器下<dialog></dialog>的渲染缺陷严重，强行叠加手写弹层可能触发白屏或卡死
真正麻烦的从来不是怎么写 showModal()，而是 Safari 下 ::backdrop 点击不可靠、returnValue 永远为空、焦点管理全靠手动补 —— 这些问题不报错，但上线后第一个键盘用户就会卡住。
