多层 Modal 背景更黑是因为多个 .modal-backdrop 叠加导致透光率下降；Bootstrap 每次 show() 可能新增遮罩层，叠加后视觉变深，而非 opacity 值真正叠加。
为什么多层 Modal 一打开背景就更黑？
不是“变黑了”，而是多个 .modal-backdrop 叠在一起——Bootstrap 每次调用 show() 都会追加一个遮罩层，但默认只维护一个 DOM 节点；而当你强行打开第二个 Modal（比如没等第一个关完就触发），它可能生成新的 .modal-backdrop，也可能复用旧的，但 opacity 值不会叠加，视觉上却因渲染顺序或浏览器合成差异显得更深。更常见的情况是：你看到的“更黑”，其实是第一个 Modal 的遮罩还在、第二个又盖了一层半透明黑色，叠加后透光率下降。
data-backdrop="false" 真的能彻底禁用遮罩吗？
能，但只在 Modal 初始化时生效。如果 Modal 已经渲染过，再动态改 data-backdrop 属性无效；必须在触发前就写死，比如：
<button data-bs-toggle="modal" data-bs-target="#secondModal" data-bs-backdrop="false">打开第二层</button>
注意三点：
-
data-bs-backdrop="false"会让 Bootstrap 完全跳过创建.modal-backdrop元素，后续所有针对它的 CSS（如.modal-backdrop { opacity: 0 }）都无效 - 此时
data-bs-keyboard="false"强烈建议同步设置，否则按 Esc 还会关闭 Modal，逻辑不一致 - 如果该 Modal 是通过 JS 手动
$('#modal').modal('show')调用的，得在初始化时传参：$('#modal').modal({ backdrop: false })
手动删 .modal-backdrop 有哪些副作用？
用 $('.modal-backdrop').remove() 确实能立刻让背景“不黑”，但它破坏了 Bootstrap 的生命周期管理：
- Modal 关闭时，Bootstrap 会尝试 hide 并移除它自己的
.modal-backdrop，但 DOM 已被你提前删了，控制台虽无报错，但内部状态错乱 - 再次打开任意 Modal 时，遮罩层可能不重建，或重建位置错乱（尤其在使用
appendTo: 'body'时） - 如果页面有多个 Modal 实例，
$('.modal-backdrop')会匹配全部，容易误删其他还在用的遮罩
真要临时清理，建议限定范围：$('#secondModal').closest('.modal').next('.modal-backdrop').remove()，但不如从源头禁用来得干净。
最稳的方案：CSS 覆盖 + body 滚动修复
90% 场景下，你不需要多层 Modal，只需要“看起来像嵌套”的轻量交互。这时推荐纯 CSS 方案，不碰 JS 逻辑，升级兼容性好：
body.modal-open { overflow-y: auto !important; padding-right: 0 !important; }
.modal-backdrop { opacity: 0 !important; filter: alpha(opacity=0) !important; }
关键点：
- 两段必须同时存在，缺一不可：第一段防滚动条消失导致页面右移，第二段让遮罩“存在但不可见”
- 确保这段 CSS 在 Bootstrap 自带样式之后加载，用
!important是为了压过框架默认权重 - 它不影响点击关闭逻辑——背景仍可点击关闭 Modal，只是不暗了
如果你真需要两层同时可见，别硬套 Modal；把第二层改成 position: fixed + z-index 手动控制的普通 <div>，自己管焦点和 Esc 事件——Bootstrap 的 Modal 不是万能容器，它是为单任务设计的。
