Bootstrap官方不支持多层Modal，因其单例设计导致z-index冲突、遮罩错位、焦点失控及可访问性失效；临时方案是监听show.bs.modal动态提升z-index并同步调整.backdrop；真实需求应改用折叠面板、选项卡或向导组件替代。
bootstrap 官方 modal 不支持多层弹出，强行调用 modal('show') 会导致新 modal 被压在旧 modal 下、遮罩错位、tab 焦点失控、屏幕阅读器无法识别嵌套关系——这不是兼容性问题，是设计使然。
为什么新 Modal 总是看不见或点不中
根本原因是 Bootstrap 5 的 .modal 默认 z-index: 1055，.modal-backdrop 固定为 1050，且只生成一个遮罩 DOM。多个 Modal 共享同一层级，后开的没提升 z-index 就必然被盖住。
- 现象：背景变暗但新 Modal 不显示，控制台无报错，
inspect发现其z-index还是 1055 - 遮罩没同步调整：即使 Modal 的 z-index 上去了，
.modal-backdrop仍卡在 1050，导致点击穿透到下层 -
$('.modal:visible').length在show.bs.modal阶段可能不准，因为动画还没开始，DOM 可见性未更新
动态修正 z-index 的最小可行方案
不用改源码、不引入第三方插件，仅靠 jQuery + 原生 Bootstrap 5 即可临时支撑 2 层嵌套（如主表单 + 删除确认）：
- 监听
show.bs.modal，用setTimeout(() => {}, 0)确保获取到准确的可见 Modal 数量 - 给当前 Modal 设
z-index：比如1055 + (10 * visibleCount) - 必须同步处理遮罩：取
$('.modal-backdrop').last()（不是.first()），设为zIndex - 1 - 避免用
$('.modal.in')判断——Bootstrap 5 已弃用.in类，改用:visible或data('bs.modal')?.isShown
$(document).on('show.bs.modal', '.modal', function () {
setTimeout(() => {
const visibleModals = $('.modal:visible').length;
const newZIndex = 1055 + (10 * visibleModals);
$(this).css('z-index', newZIndex);
$('.modal-backdrop').last().css('z-index', newZIndex - 1);
}, 0);
});Modal 嵌套的真实需求该用什么替代
绝大多数“必须多层 Modal”的场景，本质是流程设计偏差，继续硬撑会拖垮可访问性和维护性：
- 删除确认弹窗 → 改用行内按钮 + 文案提示（如“确定删除？不可恢复”），配合
Toast反馈操作结果 - 表单中要查子数据 → 把子内容做成折叠面板（
accordion）或选项卡（tab），保留在同一 DOM 上下文 - 多步骤操作 → 用
bs-stepper或自定义 wizard 组件，状态集中管理，不依赖 Modal 堆叠 - 查看详情再编辑 → 详情页直接提供“编辑模式”切换，避免跳转丢失滚动位置和输入状态
别碰的雷区
这些操作看似能“解决问题”，实则埋下更隐蔽的坑：
- 手动
remove()已关闭的 Modal DOM：Bootstrap 内部实例仍持有引用，hidden.bs.modal事件会丢失 - 在
hide.bs.modal中恢复按钮状态：它在动画结束前触发，用户可能还没看到关闭效果就又能点了 - 依赖
data-bs-backdrop="static"+ 手动控制关闭逻辑：一旦 Modal 被 ESC 或点击遮罩意外关闭，状态就不同步了 - 用
body上的padding-right补偿滚动条 —— 多层 Modal 会叠加这个 padding，造成越来越大的偏移
真正难的不是让两个 Modal 同时显示，而是判断哪个交互环节其实不该用 Modal；一旦开始手动管理 z-index 和 backdrop，你就已经站在可访问性悬崖边上。
