dialog标签不支持嵌套，因浏览器渲染层强制限制任意时刻仅一个元素处于顶层；连续调用showModal()会报“元素已在顶层”错误，属HTML规范约束而非bug。
dialog 标签根本不支持嵌套，不是兼容性问题，是浏览器渲染层的硬性限制——任意时刻只能有一个元素处于“顶层”（top layer），第二次调用 showModal() 必然失败。
为什么连续调用 showModal() 会报错
错误信息通常为：DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element is already in a top layer. 这不是 bug，是 HTML 规范强制约束。浏览器不会因为你在 DOM 里写了两层 <dialog><dialog></dialog></dialog> 就允许两个模态同时存在；内层 dialog 的 showModal() 调用直接被拒绝，连事件都不触发。
常见误判包括：
- 以为是
z-index没设好 —— 实际上dialog::backdrop是伪元素，不参与 CSS 层叠上下文 - 以为给外层加
transform或overflow: hidden能“隔离” —— 这反而会让dialog错位、焦点失效，尤其在 Safari 中极易白屏 - 以为
show()可以替代 —— 它不进顶层、无遮罩、Tab 键可穿透，和display: block几乎等价
dialog 必须挂载在 body 直系子级
如果把 dialog 写在 <form></form>、<div class="container"> 或任何设置了 <code>transform/will-change 的父容器里，它的自动居中逻辑就会失效，::backdrop 可能不渲染或覆盖不全。
立即学习“前端免费学习笔记（深入）”；
典型错误结构：
<div class="page"> <dialog></dialog> </div>
正确写法必须是：
<body> <!-- 其他内容 --> <dialog id="mainDialog"></dialog> </body>
否则即使调用了 showModal()，也可能表现为“看不见”“点不中”“Esc 不响应”。
想实现多层弹窗效果，只能换思路
所谓“多层”，实际要的是视觉分层 + 逻辑可退栈，不是 DOM 嵌套。可行路径只有两种：
- 复用单个
dialog：用 JS 替换内部 HTML，维护一个状态栈（如const stack = []），每次前进 push，后退 pop；切换后必须手动调用dialog.querySelector('[autofocus]')?.focus()，否则键盘用户会卡住 - 手写
position: fixed弹层：放弃原生dialog，改用<div role="dialog" aria-modal="true">，配合inset: 0遮罩、递增z-index（如 1000/1050/1100）、document.body.inert = true锁背景；移动端必须用pointerdown判定遮罩点击，避免 iOS 300ms 延迟
真要“伪衔接”，唯一安全做法是：关闭当前 dialog 后，用 setTimeout(() => nextDialog.showModal(), 0) 打开下一个——利用事件循环清空顶层状态，但这仍是串行，不是并存。
最常被忽略的点是焦点管理：原生 dialog 自动处理 Tab 环绕和初始聚焦，一旦自己实现，漏掉 autofocus 查找、inert 同步或 aria-hidden 切换，键盘和屏幕阅读器用户就直接卡死。
