showmodal() 是使 成为置顶模态框的必需方法；不调用则无模态行为，常见失效原因包括执行过早、dom 未挂载、open 属性被误删或父容器 css 干扰；backdrop 不触发默认关闭，需手动坐标判断；close() 不自动还焦且 safari 不支持 returnvalue。
showModal() 是让 <dialog></dialog> 真正成为置顶模态对话框的唯一可靠方式；不调用它，弹窗不会出现，或出现后不锁背景、不拦截 Esc、不聚焦——它不是“可选增强”，而是“开关”。
为什么调用 showModal() 后 dialog 还是不显示？
最常见原因不是代码写错，而是执行时机或 DOM 状态不对：
- 脚本在
DOMContentLoaded之前运行，document.querySelector('dialog')返回null -
<dialog></dialog>是动态插入的（比如通过innerHTML或框架渲染），但你没等它挂载完就调用了showModal() - 手动删掉了
open属性（showModal()会自动加，但删了它又不重调，DOM 就“卡住”在非激活态） - 父容器设置了
transform或will-change，尤其在 Safari 中会导致<dialog></dialog>渲染错位甚至完全不可见
点击遮罩层（backdrop）为什么不关闭？
这不是 bug，是规范行为：showModal() 创建的 ::backdrop 是伪元素，不触发默认关闭逻辑，也不保证事件冒泡到 <dialog></dialog>。Safari 中尤其棘手：
- Chrome/Edge 120+ 可靠支持
e.target === dialog判断是否点在 backdrop 上 - Safari 15.4–17.6 中，
e.target几乎永远不是dialog，得 fallback 到坐标判断，例如：e.clientX - 别用
dialog::backdrop选择器绑定事件——它纯样式层，无法监听 - 如果用了
show()而非showModal()，压根没有 backdrop，此逻辑直接失效
showModal() 和 close() 配合时容易漏的关键点
看似简单，但几个副作用必须手动补全，否则键盘用户或 Safari 用户会卡住：
-
close()不会自动把焦点还给触发按钮，需显式调用triggerBtn.focus()或至少document.body.focus() -
dialog.returnValue在 Chrome/Edge/Firefox 中可用（如dialog.close('confirmed')），但 Safari 目前（v17.6）始终返回空字符串，不能用于传值 - 按 Esc 关闭时会触发
close事件，但你不监听就收不到——必须写dialog.addEventListener('close', handler) -
showModal()不清理 DOM，反复打开同一<dialog></dialog>没内存泄漏，但如果每次新建节点却不移除，DOM 会越积越多
真正麻烦的不是语法，而是 Safari 的 backdrop 行为不一致、焦点管理缺失、以及 returnValue 不可用——这些细节在开发阶段很难暴露，往往上线后才被键盘用户或 iOS 用户反馈出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
