showmodal() 是唯一能创建真正模态对话框的方法，它启用原生模态状态（禁用背景焦点、拦截tab、响应esc、渲染::backdrop并触发close事件），而show()仅显示可穿透浮层，几乎不应用于登录框等阻断场景。
showModal() 是唯一能做出真正模态对话框的方法；show() 只是显示一个可穿透的浮层，别拿它做登录框、确认弹窗这类需要阻断操作的场景。
showModal() 为什么必须用，而 show() 几乎不该用
两者都让 <dialog></dialog> 元素可见（自动加 open 属性），但交互约束天差地别：
-
showModal()进入浏览器原生模态状态：禁用背景焦点、拦截 Tab 键、响应 Escape、生成::backdrop、触发close事件 -
show()不做任何拦截：背景仍可点击/滚动/聚焦，Tab 键直接跳出对话框，::backdrop根本不渲染，close事件也不会被触发（除非你手动调close()） - 常见错误是写成
dialog.show()后发现用户还能点背后按钮、按 Esc 没反应、点遮罩没关闭——那是因为压根没遮罩，也不是模态 - 如果你只是要一个悬浮帮助面板、快捷工具栏这类不打断流程的轻量提示，
show()才勉强适用；其他情况一律用showModal()
点击遮罩或按 Esc 关闭后，你的逻辑为什么没执行
浏览器默认允许点击 ::backdrop 或按 Escape 关闭 showModal() 弹窗，但这只是移除 open 属性并触发 close 事件——它不会帮你清表单、重置状态、发请求或跳转路由。
- 必须显式监听：
dialog.addEventListener('close', handler)，否则收不到关闭信号 - 点击遮罩的判断在 Safari 中不可靠：
e.target === dialog在 Safari 15.4–17.6 中几乎总为false，得 fallback 到坐标判断或加 wrapper<div class="backdrop"> <li>按 Escape 时漏掉 <code>e.preventDefault()，某些 Safari 版本会触发页面滚动 - 别在按钮里写
onclick="dialog.remove()"——这会删 DOM 节点，下次再调showModal()就报错The element is not in a Document. - 必须由
showModal()触发，否则dialog::backdrop { background: rgba(0,0,0,0.5); }完全不渲染 - Firefox 当前（2026 年）只做逻辑阻塞，不渲染
::backdrop，所以样式无效是正常行为 - Chrome/Edge 111+、Safari 17.4+ 支持渲染，但需手动补全样式；若父容器有
overflow: hidden或transform，::backdrop可能被裁剪 -
::backdrop是纯样式层，无法绑定事件、读取状态，也别指望用它做点击判断主逻辑 - 检测支持：用
'showModal' in HTMLDialogElement.prototype，而不是'dialog' in document.createElement('div')（后者只判标签存在） - Safari 15.4+ 才支持
showModal()，iOS Safari 16.4+ 才稳定；Safari 目前（v17.6）仍不支持dialog.returnValue - 确保在
DOMContentLoaded后调用，或脚本放在
dialog::backdrop 样式不生效的硬性前提
::backdrop 不是万能遮罩层，它只在 showModal() 被调用时才存在；用 show()、手动加 open 属性，甚至 CSS 设置 display: block，都无效。
兼容性与 DOM 就绪问题最容易被忽略
不是所有浏览器都把 showModal() 当回事，尤其 Safari 和旧版 Chrome；而且 DOM 没就绪就调用，必失败。
