show()与showModal()本质区别是非模态显示与原生模态阻塞：前者仅添加open属性、无焦点锁定、无backdrop、不拦截交互；后者进入浏览器顶层栈，自动禁用背景、生成backdrop、响应Esc和点击遮罩，并触发close事件。
show() 和 showModal() 的行为差异本质是模态 vs 非模态
两者都让 dialog 元素可见（即添加 open 属性），但交互约束完全不同：showModal() 进入浏览器原生模态状态，show() 只是“显示”，不干预页面其余部分。
常见错误是用 show() 代替 showModal() 做登录框、确认弹窗——用户仍能点背景按钮、滚动页面、按 Tab 跳出，根本不是“阻塞式”体验。
-
showModal()：自动禁用背景焦点、拦截 Tab 键、响应 Escape、触发close事件、生成::backdrop（需 CSS 支持） -
show()：无焦点锁定、无::backdrop、无 Esc 关闭、不阻止背景滚动或点击、不触发close事件（除非手动调用close()）
DOM 层级与遮罩渲染表现完全不同
showModal() 将 dialog 推入浏览器顶层栈（top layer），绕过所有 CSS z-index 和父容器堆叠上下文；show() 仅设 open 属性，仍受文档流约束，且不生成 ::backdrop。
这意味着：
立即学习“前端免费学习笔记（深入）”；
-
showModal()的dialog和::backdrop总在最上层，哪怕父元素有transform或overflow: hidden，也不会被裁剪（但::backdrop渲染可能受影响） -
show()的dialog如果嵌套在transform容器里，定位会失常，::backdrop根本不会出现（因为它本来就不生成） - 无论你怎么写
dialog::backdrop { ... }，对show()都无效
关闭逻辑必须手动监听，不能依赖默认行为
点击遮罩或按 Esc 不会自动执行你的关闭逻辑。浏览器默认允许点击 ::backdrop 或按 Escape 关闭 showModal() 弹窗，但这只是移除 open 属性并触发 close 事件——它不会帮你清表单、发请求、或跳转路由。
你必须显式监听这些行为，并在回调里调用 close()（确保触发事件）或执行自定义逻辑：
dialog.addEventListener('click', (e) => {
if(e.target === dialog) {
dialog.close(); // ✅ 显式 close，保证 close 事件触发
}
});
dialog.addEventListener('keydown', (e) => {
if(e.key === 'Escape') {
e.preventDefault();
dialog.close();
}
});
漏掉 e.preventDefault() 在某些 Safari 版本中会导致页面滚动；漏掉 e.target === dialog 判断，则点对话框内部也会误关。
调用失败的常见原因和兼容性陷阱
showModal() 报 DOMException: The element does not have a namespace → 多半是脚本执行太早，DOMContentLoaded 前就调用了；show() 调用后完全没反应 → 很可能 DOM 还没就绪，或元素未正确选中（比如 document.querySelector('dialog') 返回 null）。
真正难的不是调用 showModal()，而是处理三件事：
- Safari 的
::backdrop不可见（需 fallback 坐标判断或手动加遮罩层） -
dialog.returnValue在 Safari 17.6 中始终返回空字符串，不能用于传值 - 关闭后焦点不会自动回到触发按钮，需手动
triggerBtn.focus()，否则键盘用户卡住
