多层模态框的.modal-backdrop叠成深灰色，是因为每个modal创建独立backdrop且Bootstrap不复用或清理旧backdrop，导致多个backdrop堆叠在body下、z-index累加但未对齐，视觉变厚并拦截点击事件。
为什么多层模态框的.modal-backdrop会叠成深灰色
不是 backdrop 多了颜色就变深，而是每个新 modal 都创建一个独立 .modal-backdrop 元素，且 Bootstrap 不去重用或清理旧 backdrop。它们堆在 body 下，z-index 累加但未对齐（比如第一个 backdrop 是 1040，第二个被设成 1041），结果视觉上遮罩变厚、点击事件可能被上层 backdrop 拦截。
常见错误现象：
- 点子模态框里的按钮没反应，鼠标 hover 也没反馈
- 开发者工具里能看到多个
.modal-backdrop同时存在 - 关闭子 modal 后，父 modal 内容无法滚动，主页面却开始滚动
根本原因：Bootstrap 的 backdrop 管理是“一开一建、一关一删”，不感知其他 modal 是否还开着。
如何避免重复挂载 .modal-backdrop
核心思路是复用单个 backdrop，而不是放任它层层叠加。不要等 modal 自动创建，自己接管 backdrop 生命周期。
实操建议：
- 初始化时手动创建一个全局 backdrop：
document.body.insertAdjacentHTML('beforeend', '') - 所有 modal 打开前，统一设置它的
z-index为当前最高值（如1055 + visibleCount * 10），再把 backdrop 的z-index设为该值减 1 - 关闭 modal 时不删 backdrop，只 hide 它；只有当所有 modal 都关闭时，才
remove()backdrop - 监听
hidden.bs.modal而非hide.bs.modal，确保 DOM 还在、样式可读
怎样让多层 modal 共享同一层叠上下文起点
如果父 modal 的容器本身已触发新层叠上下文（比如加了 transform 或 opacity: 0.99），那子 modal 即使挂到 body 下，也会被“继承”进那个低层级上下文里——数值再大也出不来。
必须确保所有 modal 和 backdrop 都从 document.body 开始计数：
- 检查父 modal 的直接父节点是否含
position: relative+z-index、transform、filter等隐式触发属性 - Vue 项目中，子 modal 必须用
- React 项目中，子 modal 必须用
createPortal渲染到document.body，不能 return 在父组件里 - 原生 JS 动态插入时，确认
modalEl.parentNode !== document.body时立即执行document.body.appendChild(modalEl)，且在show.bs.modal事件前完成
修复 body.modal-open 类丢失导致滚动错乱
Bootstrap 关闭任意 modal 时都会执行 $('body').removeClass('modal-open')，但它不检查是否还有别的 modal 在 show 状态，结果父 modal 还开着，body 却恢复了滚动，内容被截断。
关键动作是拦截默认行为，改用主动维护：
- 监听所有 modal 的
hidden.bs.modal事件，用 class 选择器限定范围（如'.nested-modal'） - 事件回调里查
$('.modal.show').length > 0，为真就立刻$('body').addClass('modal-open') - 不要写
removeClass反向逻辑，那会和 Bootstrap 原生逻辑冲突 - 若用 Vue/React，在 unmount 或 cleanup 阶段解绑该监听，否则内存泄漏
最易被忽略的一点：modal 内部如果有 modal-dialog-scrollable，关闭子层后其 height 和 overflow-y 不会自动恢复，得手动触发 $(parentModal).find('.modal-body').css('height', '') 或重设 max-height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
