浏览器原生不支持嵌套，仅允许单模态栈顶显示；应复用同一动态切换内容，或改用带aria-modal的div模拟叠加，并严格管理焦点流与backdrop。

多层

嵌套会直接失效

浏览器原生

不支持嵌套：第二个 showModal() 调用会关闭第一个，或被静默忽略。这不是 bug，是规范行为——

设计上就是单模态栈顶元素，DOM 中多个

同时 open 属性为 true 时，只有最晚打开的那个能显示。

替代方案：用单个

+ 动态内容切换

不要靠 DOM 嵌套模拟“多层”，而是复用同一个

元素，通过 JS 控制内部结构。关键点：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 所有对话框内容（警告、确认、输入表单）都放在同一个
  内部，用 data-step 或 class 区分状态
• 用 dialogElement.innerHTML = template 或 dialogElement.replaceChildren(...) 替换内容，避免残留事件监听器
• 每次切换前调用 dialogElement.close() 再 showModal()，确保焦点和 backdrop 行为一致
• 键盘操作（Esc 关闭）天然只作用于当前打开的
  ，无需额外拦截

如果必须视觉上“叠加”，用 position: fixed 模拟

真要叠两层弹窗（比如主警告 + 子确认），就别用

嵌套，改用普通

：

• 外层用 z-index: 1000，内层用 z-index: 1050，并显式加 aria-modal="true"
• 必须手动管理焦点：打开内层时 focus() 到第一个可聚焦子元素；关闭时恢复到外层触发按钮
• 按 Esc 时需判断当前激活的是哪一层，不能无差别 close()
• backdrop 需用伪元素或额外
  实现，原生

  的 ::backdrop 不会级联

  容易被忽略的焦点陷阱

  多层弹窗最常出问题的不是结构，是焦点流断裂。用户按 Tab 键卡在某一层出不去，或关闭后焦点丢失到页面顶部。

  • 每层弹窗打开前，先用 document.activeElement 记录上一焦点源（比如按钮），关闭后 .focus() 回去
  • 弹窗内部用 inert 属性临时禁用其他交互区域，比单纯 display: none 更可靠
  • 不要依赖 tabindex="-1" 拼凑可聚焦性——确保每个弹窗都有至少一个 tabindex="0" 或原生可聚焦元素（, ）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！