改z-index不能解决背景变暗问题，因起作用的是独立遮罩层.modal-backdrop；应调整其rgba()的alpha值控暗度，清理多余backdrop实例，并修复body滚动行为。
为什么改 z-index 不能解决“背景变暗”问题
很多人看到模态框弹出后背景“变暗”，第一反应是调高 .modal-dialog 的 z-index，以为这样就能“盖过阴影”。但实际起作用的是独立的遮罩层 .modal-backdrop——它是一个固定定位、全屏覆盖的兄弟节点，不是 .modal 的子元素。调高弹窗层级，只是让它不被遮罩层挡住；遮罩层本身依然存在，依然吸光。真正控制“暗度”的，是它的 background-color 和 opacity（或 rgba() 中的 alpha 值），不是深度堆叠。
改颜色还是改透明度？优先用 rgba() 调整 alpha
Bootstrap 5 默认用 background-color: rgba(0, 0, 0, 0.5)，BS4 则拆成 background-color: #000 + opacity: .5。推荐统一用 rgba() 写法，便于微调：
- 要加深阴影：把 alpha 从
0.5改成0.7或0.8，比如rgba(0, 0, 0, 0.7) - 要减淡阴影：降到
0.3或0.2，注意别低于0.15，否则视觉隔离失效 - 换颜色但保持暗度：只改前三个数值，alpha 不动，例如深蓝遮罩：
rgba(30, 58, 138, 0.5) - 避免写
background: rgba(...) !important——这会干扰 JS 动画（如 fade 过渡）和data-bs-backdrop="static"的交互逻辑
多次点击后阴影“越来越深”？那是多个 .modal-backdrop 叠加了
常见于用 .load() 动态加载页面、或手动反复调用 show() 却没清理 DOM 的场景。每次打开模态框，Bootstrap 会插入一个新的 .modal-backdrop，而旧的没被移除，叠加后视觉上就变深了。
- 根本解法：确保每次隐藏模态框时，触发
hidden.bs.modal事件并手动清理：$('#myModal').on('hidden.bs.modal', function () { $('.modal-backdrop').remove(); $('body').removeClass('modal-open'); }); - 更稳妥的做法是禁用自动遮罩，在触发按钮上加
data-bs-backdrop="false"（BS5）或data-backdrop="false"（BS4），再配合 CSS 控制是否需要点击关闭 - 别依赖
hide()方法自动清理——它只隐藏，不删 DOM；尤其在动态加载内容时，容易漏掉上一次的遮罩层
想彻底去掉“变暗”，但又不破坏滚动条宽度一致
单纯设 .modal-backdrop { opacity: 0 } 不够。Bootstrap 在模态框打开时会给 body 加 modal-open 类，并设 overflow: hidden，导致右侧滚动条消失、页面内容右移约 17px，用户感知为“背景抖了一下”。这常被误认为是阴影问题的一部分。
- 必须同步修复 body 行为：
.modal-backdrop { opacity: 0 !important; } body.modal-open { overflow-y: auto !important; padding-right: 0 !important; } - 如果用了深色模式切换（
data-bs-theme="dark"），建议用 CSS 自定义属性做主题适配，而不是硬编码值 - 注意：若设置
data-bs-backdrop="false"，则.modal-backdrop根本不会生成，上面所有 CSS 都无效——此时无需处理遮罩，但需自行实现点击关闭逻辑
CSS 覆盖方式最稳定，但关键点在于：改的是遮罩层本身，不是弹窗；清理的是 DOM 实例，不是样式；修复的是 body 滚动行为，不是视觉错觉。
