Modal被.modal-backdrop遮盖的根本原因是层叠上下文错乱：.modal未挂载到body导致z-index失效，或父级position:relative创建了新层叠上下文；应使用Portal/Teleport挂载到body，移除冗余relative定位，并确保遮罩清理与样式覆盖正确。
Modal内容被.modal-backdrop盖住，根本不是z-index数值不够
不是.modal的z-index: 1050太小，而是它没在正确的层叠上下文中生效。只要.modal没直接挂载在document.body下，它的z-index就只在父容器内部起作用——而.modal-backdrop（z-index: 1040）是直接插在body里的，自然“盖”住了它。
常见现象包括：模态框能看见，但点不了按钮、输不了文字；开发者工具里选中.modal，发现父节点是div#app或某个.container，而不是body；手动加!important也没用，或者加了之后布局错乱。
- React项目里，别把
<Modal />写在组件return里，要用createPortal渲染到document.body - Vue 3项目里，用
<Teleport to="body"><Modal /></Teleport>，别依赖v-model绑定在局部节点 - 原生JS调用前，先执行
document.body.appendChild(modalEl)，且必须在modal.show()之前
给.modal或.modal-dialog加position: relative会触发新层叠上下文
这是高频误操作。Bootstrap依赖.modal的position: fixed和.modal-dialog的position: absolute来构建层级关系。一旦你在任一父级上加了position: relative（哪怕只是为布局），就会创建独立层叠上下文，导致内部所有z-index都失效。
检查方式：打开开发者工具，看.modal和.modal-dialog的computed position和z-index值。如果position显示为relative，基本就是它了。
- 移除所有非必要的
position: relative声明，尤其是套在.modal外层的容器上 - 若真需定位控制，改用
transform: translateZ(0)替代，它不会触发新层叠上下文 - 避免在
.modal上设z-index: auto或显式低值（如z-index: 1）
遮罩层残留导致页面始终“变暗”
多层Modal叠加关闭后，.modal-backdrop常只删掉一个，其余还在DOM里挂着——于是页面背景持续被遮罩，但又没Modal可点。这不是样式问题，是DOM清理遗漏。
典型场景：连续打开3个Modal，然后点空白处一次性关闭，结果只剩一层遮罩留在body里。
- 禁用点击空白关闭：初始化时传
backdrop: "static"，强制用户逐层点×关闭 - 监听最外层Modal的
hide.bs.modal事件，手动清空所有遮罩：$(".modal-backdrop").remove() - 避免用
data-bs-backdrop="false"后忘了同步设data-bs-keyboard="false"，否则Esc仍会触发隐藏逻辑
.modal-backdrop样式改不生效？大概率是作用域或加载顺序问题
.modal-backdrop由Bootstrap JS动态插入body，所以你的CSS必须满足两个条件才能覆盖它：加载顺序在Bootstrap CSS之后，且选择器权重不弱于原生.modal-backdrop（它本身权重就很轻）。
失效常见原因：
- CSS文件虽在Bootstrap之后引入，但被更高权重规则（如
body .modal-backdrop）覆盖 - 用了CSS-in-JS库（如Emotion），样式没注入全局，动态生成的
.modal-backdrop匹配不到 - Vue单文件组件用了
<style scoped>，而.modal-backdrop插在body下，不在组件作用域内
验证方法：打开开发者工具，确认元素上有.modal-backdrop类，并检查computed background-color是否被override。推荐写法：.modal-backdrop { background-color: rgba(0, 0, 0, 0.7); }，别用#000纯色。
