bootstrap不支持嵌套模态框，因data-dismiss会全局关闭所有模态框、body.modal-open类被错误移除、backdrop重复叠加及滚动状态重置异常；修复需手动维护modal-open类、复用单个backdrop、css约束滚动容器高度。
为什么嵌套模态框会关掉父层或滚动错乱
Bootstrap 官方不支持多层模态框同时打开，data-dismiss="modal" 按钮默认会关闭所有已打开的 .modal 实例，不是“就近关闭”，而是全局触发隐藏逻辑；更关键的是，每次打开新模态框时，Bootstrap 会移除 body.modal-open 并重置 overflow 和滚动条位置——但关闭子模态框时它不会自动恢复父模态框的滚动状态，导致父层内容无法滚动，页面主滚动条突然激活。
- 子模态框的
hidden.bs.modal事件触发后，body上的modal-open类被错误移除（因为 Bootstrap 认为“没模态框了”） -
.modal-backdrop叠加多次，z-index 累加失效，遮罩变深甚至点击穿透 - 父模态框若带
modal-dialog-scrollable，关闭子层后其内部height计算异常，overflow-y: auto失效
修复 body.modal-open 丢失问题
核心是拦截子模态框关闭行为，确保只要还有任意一个 .modal.show 存在，body 就必须保有 modal-open 类。不要依赖 Bootstrap 自动管理——它只认“最后一个关闭”，不查“是否还有别的开着”。
在子模态框上绑定事件，且用 class 选择器避免污染全局：
$('.nested-modal').on('hidden.bs.modal', function () {
if ($('.modal.show').length > 0) {
$('body').addClass('modal-open');
}
});
- 必须用
.modal.show而非.modal.in（v5+ 已弃用in） - 不要写成
$('body').removeClass('modal-open')的反向操作，那会和 Bootstrap 冲突 - 如果使用 Vue/React，应在
onBeforeUnmount或useEffect cleanup中解绑该监听，避免内存泄漏
避免 backdrop 叠加和点击穿透
多个 .modal-backdrop 共存时，Bootstrap 不会自动复用或去重，每个新模态框都新建一个 backdrop 元素，造成遮罩过深、层级混乱、甚至点击事件被上层 backdrop 拦截。
最稳妥的做法是：只保留一个 backdrop，由最外层模态框控制显隐：
$(document).on('show.bs.modal', '.nested-modal', function () {
// 关闭已有 backdrop，只留一个
$('.modal-backdrop').remove();
// 强制让当前 modal 使用现有 backdrop 或新建一个
if ($('.modal-backdrop').length === 0) {
$('body').append('<div class="modal-backdrop fade"></div>');
$('.modal-backdrop').addClass('show');
}
});
- 不要用
!important硬调z-index修 backdrop 层级，治标不治本 - 若项目已用自定义 backdrop（如通过
data-bs-backdrop="static"），需同步检查是否重复插入 - 注意
.modal-backdrop默认 z-index 是 1040，必须低于最外层.modal（1050），高于导航栏（1030）
滚动条错乱：父模态框内容无法内部滚动
典型现象：A 模态框含长内容 + modal-dialog-scrollable，打开 B 后再关闭 B，A 内部滚动失效，只能滚页面主体。根本原因是 Bootstrap 在关闭 B 时执行了 resetScrollbar()，却没判断 A 是否仍在显示，直接把 padding-right 还原、把 overflow 放回 body。
绕过它的 JS 重置逻辑，用 CSS 强约束父容器高度：
.modal.show .modal-dialog-scrollable .modal-content {
max-height: calc(80vh - 4rem);
}
.modal.show .modal-dialog-scrollable .modal-body {
max-height: calc(70vh - 4rem);
overflow-y: auto;
}
- 避免用
height: 100%或flex: 1，它们依赖父容器高度计算，在嵌套中极易断链 - 必须给
.modal-body显式设max-height和overflow-y: auto，否则scrollable类只是个空壳 - 若父模态框本身也用
position: fixed，需确认没触发新层叠上下文，否则内部 z-index 再高也压不住外部 backdrop
嵌套模态框本质是游走在 Bootstrap 设计边界之外，所有修复都建立在“不破坏原有生命周期”的前提下；最容易被忽略的是事件监听的时机——hidden.bs.modal 触发时，DOM 还未完全移除，但 .show 类已被清除，所以判断必须快、准、基于实时状态，而不是依赖 class 切换后的 DOM 结构。
