Bootstrap多层模态框问题 Bootstrap如何同时打开多个Modal-Bootstrap教程-PHP中文网

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);
});