showModal() 不能连续调用打开多个 dialog，因为浏览器任意时刻只允许一个元素处于顶层，第二次调用会报错“DOMException: The element is already in a top layer”，这是 HTML 规范限制，与 z-index、CSS 或 DOM 结构无关。
showModal() 为什么不能连续调用打开多个 dialog
因为浏览器任意时刻只允许一个元素处于“顶层”（top layer），showModal() 的本质就是把当前 <dialog> 推入该层并锁定交互。第二个调用会直接失败，报错：DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element is already in a top layer. 这不是 bug，是 HTML 规范的硬性限制。
常见误判包括：以为是 z-index 没设好、CSS 层级冲突，或 DOM 嵌套写错了（比如把一个 <dialog> 写在另一个里面）——但这些都无效。只要第一个 showModal() 成功执行，第二个就必然被拒绝，无论它是不是同一个元素、有没有加 open 属性、是否在不同容器里。
show() 也不能实现视觉层叠
show() 不进顶层，不加 ::backdrop，不锁背景焦点，Tab 键仍可穿透到页面其他元素。它只是切换 open 属性 + 显示内容，行为等同于 display: block，和 position: absolute 浮层无异。所以即使你连用多次 show()，用户依然能操作底层页面，无法形成真正意义上的“模态中再模态”。
- 旧版 Safari（show()，调用即报
TypeError: dialog.show is not a function -
show()后点击背景不会关闭，也不响应 Esc，必须手动监听事件并判断坐标 - 它不触发
close事件，dialog.returnValue不可用，焦点管理全靠自己补
想实现多层效果，只能换思路
所谓“多层弹窗”，实际要的是视觉分层 + 逻辑可退栈，不是 DOM 嵌套。可行路径只有两种：
立即学习“前端免费学习笔记（深入）”；
一是复用单个 <dialog>，通过 JS 动态替换内部 HTML，并维护一个状态栈（比如数组存历史内容）。每次切换后必须手动调用 dialog.querySelector('[autofocus]')?.focus()，否则键盘用户会卡住。
二是放弃原生 <dialog>，改用 <div role="dialog" aria-modal="true"> 手写 fixed 弹层。这时得自己管：z-index 递增、document.body.inert = true、aria-hidden 切换、遮罩点击判定（注意用 pointerdown 防 iOS 延迟）、滚动禁用（别用 height: 100vh）。
Safari 17.6 仍有严重渲染缺陷：父容器带 transform 或 will-change，<dialog> 可能错位、消失、焦点失效。此时强行叠加手写弹层极易触发白屏或卡死。
最容易被忽略的细节
哪怕只用单层 <dialog>，Safari 下也容易翻车：::backdrop 点击关闭必须 fallback 到坐标判断（e.clientX < dialog.getBoundingClientRect().left），dialog.returnValue 在 Safari 中始终为空字符串，close() 不自动还焦——这些都不是开发阶段能轻易暴露的问题，往往上线后才被键盘用户或 iOS 用户反馈出来。
