模态框弹出后背景“变暗”实为 .modal-backdrop 遮罩层的 background-color 与 opacity 共同作用所致；其本质是固定定位的半透明 div，非 z-index 深度问题。
为什么模态框弹出后背景“变暗”其实是 .modal-backdrop 在起作用
bootstrap 模态框（modal）默认会插入一个全屏遮罩层 .modal-backdrop，它本质是一个固定定位、黑色半透明的 <div>，负责视觉隔离和点击关闭逻辑。所谓“背景深度变暗”，不是 z-index 深度问题，而是这个遮罩层的 background-color + opacity 共同造成的视觉效果。
很多人误以为调高 .modal-dialog 的 z-index 就能“盖过”变暗——其实它只是让弹窗内容不被遮罩层挡住，但遮罩层本身依然存在、依然吸光。真要改“深度感”，得动遮罩层本身或彻底禁用它。
三种可控方式：禁用、透明化、或完全移除
根据你的交互需求选择：
-
想保留点击背景关闭功能，但不要变暗效果：覆盖
.modal-backdrop的样式，设为完全透明 -
不想让用户点背景关窗，也不想要任何遮罩：在触发时加
data-backdrop="false"属性（注意：此时data-keyboard="false"也建议同步设，否则 Esc 还能关） -
已弹出后临时清除（比如某些动态场景）：用 JS 手动删 DOM，
$('.modal-backdrop').remove()，但要注意后续再次打开可能不自动重建
推荐优先用 CSS 覆盖方式，稳定且无副作用。把这段加到你项目的自定义 CSS 文件末尾（确保权重生效）：
.modal-backdrop {
opacity: 0 !important;
filter: alpha(opacity=0) !important;
}
不用改 Bootstrap 原文件，也不用担心升级覆盖。
别漏掉 body 的滚动条偏移问题
模态框打开时，Bootstrap 默认会给 body 加 modal-open 类并设 overflow: hidden，这会导致页面宽度突变（右边滚动条消失 → 内容右移约 17px），用户感知上像“背景抖了一下”。这常被误认为是“背景深度变化”的一部分。
一并修复它：
body.modal-open {
overflow-y: auto !important;
padding-right: 0 !important;
}
这段必须和上面 .modal-backdrop 样式一起用，否则即使背景不暗了，页面还是会“跳”。
data-backdrop 的三个值到底影响什么
这个属性控制遮罩层的行为，不是开关，而是策略开关：
-
data-backdrop="true"（默认）：渲染遮罩层，点击即关闭 -
data-backdrop="static"：渲染遮罩层，但点击不关闭（需手动调hide()或点按钮） -
data-backdrop="false"：不渲染遮罩层 DOM，也不响应背景点击 —— 此时上面所有.modal-backdrop样式都无效，因为元素压根没生成
注意：data-backdrop="false" 后，如果用户按 Esc 键，默认仍会关闭模态框，除非同时加 data-keyboard="false"。
真正难搞的不是怎么改，而是改完之后要不要保留点击穿透能力、键盘行为是否一致、以及有没有其他插件依赖 .modal-backdrop 的存在（比如某些拖拽库会监听其事件）。上线前最好在移动端和 Safari 里实测点击区域和滚动表现。
