showModal() 是使 成为真正模态框的唯一方法，否则无背景锁定、Esc拦截或遮罩关闭；常见失效原因包括 DOM 未就绪、open 被误删、父容器 CSS 干扰及 Safari 的 returnValue 和焦点管理缺陷。
showModal() 不是“可选增强”，它是让 <dialog></dialog> 真正成为警告式模态框的唯一开关。光写标签、加 open 属性、或调用 show()，都不会锁背景、不拦截 Esc、点击遮罩也不关闭——等于没弹。
为什么调用了 showModal() 却看不到弹窗？
不是语法错，而是 DOM 状态或执行时机不对：
-
document.querySelector('dialog')返回null：脚本在<dialog></dialog>插入 DOM 前就执行了，比如放在里或没等DOMContentLoaded -
<dialog></dialog>是动态渲染的（如 React/Vue 组件内、innerHTML注入），但你没监听挂载完成就急着调用showModal() - 手动执行过
dialog.removeAttribute('open')：虽然showModal()会自动加open，但删了它又不重调，DOM 就卡在“非激活”状态 - 父容器有
transform、will-change或overflow: hidden：Safari 中极易导致弹窗偏移、裁剪甚至完全不可见
点击遮罩层（::backdrop）为什么不关闭？
这不是 bug，是规范行为：::backdrop 是伪元素，不触发默认关闭逻辑，事件也不保证冒泡到 <dialog></dialog>。
- Chrome/Edge 120+ 可靠支持
e.target === dialog判断是否点在遮罩上 - Safari 15.4–17.6 中，
e.target几乎永远不是dialog，必须降级为坐标判断：e.clientX - 绝对不要对
dialog::backdrop绑定事件监听器——它不能 attach listener，也不能读取状态 - 如果误用了
show()，压根没有::backdrop，上述所有逻辑都无效
showModal() 和 close() 配合时最容易漏的三件事
看似简单，但 Safari 和键盘用户会立刻暴露问题：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
close()不自动还焦：必须显式调用triggerBtn.focus()或至少document.body.focus()，否则 Tab 键卡死在空白处 -
dialog.returnValue在 Safari v17.6 中始终为空字符串：哪怕你写了dialog.close('confirmed')，也拿不到值；跨浏览器传参得靠按钮value+ 手动close(value)+close事件中读取 -
close事件必须显式监听：按 Esc、点遮罩、调用close()都触发它，但你不写dialog.addEventListener('close', handler)就收不到
如何真正阻止事件穿透到背景？
showModal() 默认不阻断鼠标/触摸穿透，因为 ::backdrop 的 pointer-events 默认是 none。
立即学习“前端免费学习笔记（深入）”；
- 必须加 CSS：
dialog::backdrop { pointer-events: auto; }，否则点击遮罩仍可能触发下方按钮、输入框等 - 仅靠 CSS 不够：键盘焦点仍能落到背景表单上，需配合
document.body.setAttribute('inert', '')（注意 polyfill）或手动设tabindex="-1"+aria-hidden="true" - 关闭后务必清理：移除
inert、恢复tabindex、重置aria-hidden，否则后续交互全乱
::backdrop 渲染异常、returnValue 彻底失效、以及焦点管理缺失——这些在开发阶段几乎不暴露，往往上线后被键盘用户或 iOS 用户第一个撞见。 
