bootstrap官方不支持多层模态框，根本原因在于多个.modal实例共享z-index、重复创建.backdrop、错误移除body.modal-open及焦点/滚动逻辑未适配多层；硬调z-index仅表面生效，实际引发遮挡、穿透、滚动失效等问题；临时方案是监听show.bs.modal动态计算z-index并同步处理backdrop与body class；推荐替代方案为改用折叠面板、tab切换或modal内分段，避免嵌套；核心原则是尊重bootstrap单例设计，强行突破将导致维护困难。
Bootstrap官方不支持多层模态框，所谓“Z-index冲突”只是表象，真正的问题是多个.modal实例共享同一套z-index值（默认1055）且未做递增，同时.modal-backdrop被重复创建、body.modal-open类被错误移除——调数值本身解决不了根本问题。
为什么z-index硬写无效
给.modal加z-index: 1100 !important看起来生效了，但很快会发现：.modal-backdrop还是盖住内容、子Modal关闭后父Modal无法滚动、点击穿透、背景越来越黑。这是因为：
- Bootstrap的
show.bs.modal事件触发时，并不检查已有Modal数量，直接用固定值设z-index -
.modal-backdrop节点每次show()都新增一个，而不是复用或更新旧节点 -
body.modal-open只在最后一个Modal关闭时才被移除，多层场景下它提前丢了，导致overflow: hidden失效 - 所有Modal共用同一套焦点管理与滚动锁逻辑，不是靠层级就能绕开的
临时修复：监听show.bs.modal动态提层
若必须短期支持两层（不推荐三层以上），可在show.bs.modal中实时计算并设置层级，但必须同步处理backdrop和body class：
$(document).on('show.bs.modal', '.modal', function() {
const visibleCount = $('.modal.show').length;
const newZIndex = 1055 + (10 * visibleCount);
<p>$(this).css('z-index', newZIndex);
// 只更新最后一个.backdrop，避免叠加
$('.modal-backdrop').last().css('z-index', newZIndex - 1);
});</p><p>// 关闭子Modal时不移除modal-open，只要还有.show就保留
$(document).on('hidden.bs.modal', '.nested-modal', function() {
if ($('.modal.show').length > 0) {
$('body').addClass('modal-open');
}
});</p>
注意：.nested-modal需是你自己加的class，别用.modal全局监听，否则干扰原生逻辑。
更稳的替代方案：不用多层Modal
真正健壮的做法是放弃嵌套Modal，改用语义匹配的交互模式：
- 用
accordion折叠面板展开子内容，避免脱离当前上下文 - 用
tab切换不同操作步骤，保持单层Modal结构 - 对“确认+编辑”类流程，把第二步做成Modal内的
.modal-body分段，而非新Modal - 如确需独立浮层（如富文本工具栏），用
Teleport（Vue 3）或createPortal（React）挂到body下，确保和Modal同级层叠上下文
最常被忽略的一点：Bootstrap的Modal设计就是单例，它的z-index、backdrop复用、滚动锁定、键盘焦点劫持全部基于“最多一个可见”的假设。强行突破这个前提，修得越细，后期越难维护。
