Bootstrap官方不支持多层Modal，因其Modal插件为单例设计：共享遮罩层、滚动锁和焦点管理；强行实现会导致显示异常、z-index冲突及可访问性失效。
Bootstrap官方明确不支持多层Modal，强行实现会破坏交互逻辑
bootstrap的modal插件从设计上就是单例模式——它假设页面任意时刻最多只有一个模态框处于活跃状态。这不是bug，而是刻意为之：遮罩层（.modal-backdrop）只生成一个、body滚动锁只处理一次、键盘焦点管理（如tab循环、esc关闭）也只绑定最新打开的那个。一旦你调用两次$('#modal1').modal('show')再紧接$('#modal2').modal('show')，第二个modal大概率被压在第一个下面，或直接卡住不动。
- 现象：背景变暗但新Modal不可见，控制台无报错，
z-index值没更新 - 根源：Bootstrap 5默认把所有
.modal的z-index设为1055，.modal-backdrop固定为1050，多个实例共享同一层级 - 风险：可访问性（a11y）完全失效，屏幕阅读器无法识别嵌套关系，键盘操作失控
手动修正z-index是最快见效的临时方案
如果你必须快速上线、且Modal嵌套深度不超过2层（比如主表单 + 删除确认），可以监听show.bs.modal事件，在每次显示前动态提升z-index：
$(document).on('show.bs.modal', '.modal', function () {
const visibleModals = $('.modal:visible').length;
const newZIndex = 1055 + (10 * visibleModals);
$(this).css('z-index', newZIndex);
$('.modal-backdrop').last().css('z-index', newZIndex - 1);
});
- 注意
$('.modal:visible')要等DOM渲染完成才准确，所以不能在init阶段预设 -
setTimeout(..., 0)不是必须，但加了更稳妥，尤其在Modal内容含异步加载时 - 背景遮罩必须同步调整，否则会出现“点不到按钮”或“点透到下层Modal”的问题
Modal嵌套的真实场景往往该用其他交互替代
绝大多数所谓“需要多层Modal”的需求，其实暴露的是流程设计问题：
- 删除确认弹窗 → 改成行内确认按钮+二次提示文案，或用Toast反馈
- 表单中跳转子表单 → 把子表单做成折叠面板（
accordion）或选项卡（tab），保留在同一上下文 - 多步骤向导 → 用
Wizard组件（如bs-stepper），而非层层Modal堆叠 - 查看详情再编辑 → 直接在详情页提供编辑入口，避免跳转丢失当前状态
这些方案不需要改Bootstrap源码，也不挑战可访问性底线，维护成本更低。
真要硬上多层Modal？请避开这几个坑
- 不要依赖
data-bs-dismiss="modal"自动关闭：它会关闭最近触发的Modal，不是当前所在的那个，容易关错
- 不要手动
remove()已关闭的Modal DOM：Bootstrap内部仍持有引用，可能导致hide.bs.modal事件丢失
- 不要给Modal加
position: fixed以外的定位方式：否则centered逻辑失效，小屏下偏移严重
- Bootstrap 5.3+已移除对
bodyIsOverflowing的自动检测，多层打开后若页面横向滚动条闪现，需手动$('body').addClass('modal-open')并补全padding-right
data-bs-dismiss="modal"自动关闭：它会关闭最近触发的Modal，不是当前所在的那个，容易关错 remove()已关闭的Modal DOM：Bootstrap内部仍持有引用，可能导致hide.bs.modal事件丢失 position: fixed以外的定位方式：否则centered逻辑失效，小屏下偏移严重 bodyIsOverflowing的自动检测，多层打开后若页面横向滚动条闪现，需手动$('body').addClass('modal-open')并补全padding-right 复杂点从来不在代码行数，而在焦点管理、键盘导航、屏幕阅读器顺序、以及用户是否知道“现在该操作哪个框”。这些没法靠z-index++解决。
