showModal()连续调用失败是因浏览器强制限制任意时刻仅一个元素可处于顶层；第二次调用会抛出DOMException，提示元素已在顶层，属HTML规范行为而非bug。
为什么showModal()连续调用会失败
浏览器任意时刻只允许一个元素处于“顶层”（top layer），showModal() 的本质是把 <dialog> 推入该层并锁定交互。第二次调用必然失败，错误信息明确提示：DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element is already in a top layer. 这不是 bug，而是 HTML 规范强制限制。
常见误解包括：以为是 z-index 没设高、或 CSS 层级没理清——但 dialog::backdrop 是伪元素，没有真实 DOM 节点，无法被 CSS 层叠逻辑覆盖；也不是父容器样式问题，而是渲染层硬约束。
即使 DOM 结构写成嵌套形式（如 <dialog><dialog></dialog></dialog>），内层 <dialog> 完全不会响应任何方法，也不会渲染 backdrop。
用单个 <dialog> 动态切换内容的实操要点
这是最轻量、语义最干净的替代方案：复用同一个 <dialog> 元素，通过 JS 替换其内部 HTML，并维护一个状态栈（比如数组）记录历史页面。
立即学习“前端免费学习笔记（深入）”；
- 每次打开新层级前，先
dialog.close()（确保上一状态已退出模态栈），再替换dialog.innerHTML，最后调用dialog.showModal() - 必须手动管理焦点：切换后立即执行
dialog.querySelector('[autofocus]')?.focus()，否则键盘用户 Tab 会卡在页面其他位置 - 返回上一层时，从栈
pop()并还原 HTML；关闭整个弹窗时，要恢复原始焦点（建议提前缓存document.activeElement） - 若配合
history.pushState()，需监听popstate事件并同步弹窗状态，避免前进/后退键失灵
手写 position: fixed 多层弹窗的关键避坑项
放弃原生 <dialog>，改用 <div role="dialog" aria-modal="true"> 实现堆叠，z-index 按需递增（如 1000、1050、1100）。真正麻烦的不是结构，而是以下三点：
- 遮罩层必须用
position: fixed; inset: 0;，禁用height: 100vh（iOS Safari 滚动时地址栏收放会导致高度跳变） - 点击遮罩关闭时，严格校验
e.target === overlayEl；移动端必须用pointerdown替代click，防止 iOS 300ms 延迟导致误判 - 必须手动处理
document.body.inert = true（或遍历禁用所有可聚焦元素），关闭时清除；同时同步aria-hidden和焦点环，漏掉任意一项都会让屏幕阅读器或键盘用户无法操作
兼容性检测和降级的底线逻辑
不能只检查 document.createElement('dialog') 是否成功——旧版 Safari（如 15.3）能创建元素，但调用 showModal() 会直接抛出 TypeError: modal.showModal is not a function。
唯一可靠检测方式是：'showModal' in HTMLDialogElement.prototype。返回 true 才代表可安全使用；否则必须降级。
另外，<dialog> 必须是 <body> 的直接子元素才能正确渲染 backdrop，否则 Safari 和部分 Chrome 下遮罩缺失。框架（React/Vue）中务必挂载到 document.body，不能塞进组件 wrapper div 里。
真正容易被忽略的是层叠上下文干扰：父容器加了 transform 或 opacity: 0.99，会让子元素的 z-index 失效——遮罩层数字再大也盖不住兄弟节点。
