Bootstrap官方不支持多层Modal，因其单例设计导致z-index固定（.modal为1055、.modal-backdrop为1050），多个实例共享层级而相互遮挡；临时方案是监听show.bs.modal动态提升z-index并同步调整遮罩层，但推荐改用折叠面板、选项卡等更健壮的交互替代。
Bootstrap 多层 Modal 显示不出来，z-index 冲突是主因
bootstrap 官方明确不支持多层 modal，因为其内部是单例设计：所有 .modal 共享同一套遮罩层、滚动锁和焦点逻辑。你调用两次 $('#m1').modal('show') 和 $('#m2').modal('show')，第二个 modal 很可能被压在第一个下面，或根本没渲染出来——现象就是“背景变黑但 modal 不见”。根源在于默认 .modal 的 z-index 固定为 1055，.modal-backdrop 固定为 1050，多个实例不会自动递增。
临时修复可监听 show.bs.modal 事件动态设值：
- 用
$('.modal:visible').length统计当前已显示的 Modal 数量（注意：必须在事件回调内执行，不能提前计算） - 给当前 Modal 设
z-index: 1055 + (10 * visibleCount) - 同步调整最近一个
.modal-backdrop的z-index为新值 - 1，否则点击会穿透到底层 - 别用
setTimeout(..., 0)强行延迟——它在多数场景下不必要，反而可能引入竞态
背景越来越黑？其实是多个 .modal-backdrop 叠加了
不是 opacity 真的叠加了，而是 Bootstrap 每次 show() 都可能新增一个 .modal-backdrop 节点，尤其在未等前一个关闭就触发时。多个半透明黑色层叠在一起，视觉上就更暗。
彻底禁用遮罩只对新 Modal 有效：
- HTML 触发方式需写死：
data-bs-backdrop="false"必须出现在按钮或链接的初始属性中，动态修改无效 - JS 初始化方式要传参：
$('#m2').modal({ backdrop: false })，不能之后再改data-backdrop - 禁用遮罩后，务必同步设
keyboard: false，否则按 Esc 仍会关闭 Modal，交互逻辑断裂 - 手动
$('.modal-backdrop').remove()是危险操作——会破坏 Bootstrap 内部状态，后续 Modal 可能无法重建遮罩
Modal 关闭后 body 滚动失效，.modal-open 丢了
嵌套 Modal 关闭后，如果发现底层 Modal 无法滚动，大概率是 body 上的 modal-open class 被清掉了。Bootstrap 在最后一个 Modal 关闭时才会移除这个 class，但多层场景下它的判断逻辑失效。
补救方法是在嵌套 Modal 的 hidden.bs.modal 事件里手动恢复：
- 监听具体 Modal，比如
$('#m2').on('hidden.bs.modal', ...)，避免全局污染 - 只在确认还有其他 Modal 显示时才加 class：
if ($('.modal.show').length > 0) $('body').addClass('modal-open') - 不要无条件
addClass，否则可能让非 Modal 场景也带上modal-open，影响页面样式 - 这个 class 影响的是
body { overflow: hidden }，丢了就等于解锁了滚动，但 Modal 还在，视觉错乱
真正该问的是：这里真的需要多层 Modal 吗？
绝大多数所谓“必须嵌套”的场景，其实暴露的是交互流程设计问题。强行 hack 多层 Modal 会带来可访问性（a11y）风险：屏幕阅读器无法识别层级，键盘 tab 顺序错乱，ESC 行为不可预测。
更健壮的替代方案往往更简单：
- 删除确认 → 改成行内按钮 + 文案提示（如“确定要删除吗？不可恢复”），配合
Toast反馈 - 表单中打开子表单 → 折叠面板（
accordion）或选项卡（tab），数据上下文保留在同一 DOM 树 - 查看详情再编辑 → 直接在详情页提供“编辑模式”切换，避免跳转丢失状态
- Wizard 类流程 → 用
bs-stepper或手写步骤组件，比堆 Modal 更可控、更易测试
这些方案不碰 Bootstrap 源码，不挑战 z-index 和 a11y 底线，上线快、维护省。如果你的 Modal 嵌套超过两层，优先怀疑需求本身，而不是 CSS 或 JS。
