“Cannot read property 'showModal' of null”错误源于JavaScript未找到dialog元素，主因是DOM未就绪或选择器错误；解决方法为将script移至/body前或用DOMContentLoaded监听。
Cannot read property 'showModal' of null 是 DOM 没就绪或选错元素
这个报错不是 dialog 本身的问题，而是 JavaScript 找不到那个 dialog 元素。最常见两种情况：
- 脚本在
<dialog>标签解析前就执行了，比如<script>放在<head>里且没加延迟 - 用了错误的选择器，比如
document.querySelector('.my-dialog')但实际没加 class，或者 id 拼错了
解决方法只有两个可靠路径：
- 把
<script>标签移到</body>前面（最简单） - 或者用
document.addEventListener('DOMContentLoaded', () => { /* 调用 showModal */ })
别信“加个 setTimeout 就行”——这不可靠，尤其在低端设备或高延迟加载场景下会翻车。
DOMException: The element is already in a top layer 是 showModal 连续调用导致的
浏览器规范强制限制：任意时刻只能有一个 dialog 处于顶层（top layer）。第二次调用 showModal() 必然失败，报这个错。这不是 z-index、CSS 或嵌套结构的问题，是硬性规则。
立即学习“前端免费学习笔记（深入）”；
- 哪怕你先
dialog.close()，再立刻showModal()，如果上一个还没完全退出动画或焦点回收完成，也可能触发该异常 - 同一个
dialog元素重复调用showModal()也会报错（它已经在那里了） -
show()不进顶层，所以连用多次不会报这个错，但它也不模态——背景可点、Tab 可穿透、没遮罩
真正需要“多层弹窗”时，只能换思路：
- 复用单个
dialog，用 JS 替换内部 HTML，并维护一个栈记录历史状态 - 手动调用
dialog.querySelector('[autofocus]')?.focus()，否则键盘用户会卡在空白处 - 放弃原生
dialog，改用<div role="dialog" aria-modal="true">手写弹层（此时得自己管z-index、inert、aria-hidden和 backdrop 点击判定）
点击遮罩不关闭，或 Safari 下 e.target 总是 body
原生 dialog 规范压根没定义“点击 backdrop 关闭”行为，所以所有这类逻辑都得手写监听，而且 Safari 15.4–16.3 和 17.6 都有严重兼容问题：点击灰色区域时 e.target 经常不是 dialog，而是 body 或内部按钮。
- 基础监听写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari fallback 必须加：判断坐标是否落在
dialog区域外，例如if (e.clientX - 千万别给
dialog设pointer-events: none，这会让showModal()的焦点锁定彻底失效 - 如果用了
show()，这段监听完全无效——因为show()根本不生成::backdrop
dialog 不显示、错位、Safari 白屏或焦点丢失
这些表象背后，90% 是 DOM 结构或父级样式违规。原生 dialog 对渲染上下文极其敏感，不是“写对了标签就行”。
-
<dialog>必须是<body>的**直接子元素**；嵌套在<main>、<div class="app">或任何带transform/will-change/overflow: hidden的父容器里，都会导致 backdrop 缺失、定位偏移、甚至 Safari 直接白屏 - React/Vue 项目中，必须确保
dialog挂载到document.body，不能留在组件自己的 wrapper div 里 - Safari 17.6 下，若父容器有
transform，dialog可能完全不渲染或焦点失效，此时 polyfill 或手写弹层也容易连锁崩溃 - 别手动设
dialog.open = false或dialog.removeAttribute('open')来关闭——这会残留 backdrop、不触发close事件、后续showModal()调用异常
最容易被忽略的是：即使只用单层 dialog，Safari 下也必须为 dialog::backdrop 显式补全样式，且点击关闭逻辑必须带坐标 fallback——靠 e.target === dialog 在 Safari 里就是不可靠的。
