原生 不支持多层嵌套，因浏览器仅允许一个元素处于顶层；连续调用 showmodal() 会失败，错误提示明确指出元素已在顶层；show() 无法实现模态阻断；替代方案为复用单个 动态切换内容或手写 position: fixed 多层弹窗并补全无障碍逻辑。
<dialog></dialog> 不支持多层嵌套，浏览器会直接拒绝第二次 showModal() 调用，这不是 bug，而是规范强制限制。
为什么 showModal() 连续调用会失败
浏览器任意时刻只允许一个元素处于“顶层”（top layer），showModal() 的本质是把 <dialog></dialog> 推入该层并锁定交互。第二个调用必然失败，错误信息通常是：DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element is already in a top layer.
- 不是 z-index 问题——伪元素
dialog::backdrop没有 DOM 节点，无法用 CSS 层级绕过 -
show()也不行：它不进顶层，背景仍可交互，无法实现“模态中再模态”的阻断效果 - 即使 DOM 结构上写了嵌套（如
<dialog><dialog></dialog></dialog>），内层<dialog></dialog>也完全不会响应任何方法
用单个 <dialog></dialog> 动态切换内容
这是最轻量、语义最干净的替代方案：复用同一个 <dialog></dialog> 元素，通过 JS 替换其内部 HTML，并维护一个状态栈（比如用数组记录历史页面）。
- 打开新层时：用
dialog.innerHTML = newContent替换内容，同时push()当前状态到栈 - 返回上一层时：从栈
pop()并还原上一版 HTML，或直接用history.back()配合popstate事件 - 必须手动处理焦点：每次切换后调用
dialog.querySelector('[autofocus]')?.focus()，否则键盘用户会卡住 - 关闭整个弹窗时，要清空栈并确保恢复页面原始焦点（比如存下
document.activeElement）
手写 position: fixed 多层弹窗（兼容性最强）
放弃原生 <dialog></dialog>，改用 <div role="dialog" aria-modal="true"> 实现堆叠，z-index 按需递增（如 1000、1050、1100）。
<ul>
<li>遮罩层必须用 <code>position: fixed; inset: 0;，不能用 height: 100vh（iOS Safari 滚动时地址栏收放会导致高度跳变）
e.target === overlayEl，避免子元素冒泡误触发pointerdown 替代 click，防止 iOS 300ms 延迟导致关闭卡顿document.body.inert = true（或遍历禁用其他可聚焦元素），关闭时清除；同时管理 aria-hidden 和焦点环真正麻烦的不是结构嵌套，而是焦点控制、inert 状态同步和 backdrop 点击判定——这些在原生 <dialog></dialog> 里自动完成，但一旦自己实现，漏掉任意一项都会让键盘或屏幕阅读器用户无法正常使用。
