模态框被遮罩层挡住的主因是z-index层级错乱或挂载位置不当。需检查.modal与.modal-backdrop的computed z-index值，确保前者大于后者；确认.modal为body直系子节点；多模态框需动态调整z-index；子组件弹层被截断时应移出父容器或提升父级z-index。
模态框被遮罩层挡住，z-index 值对不上
直接看浏览器开发者工具里 .modal 和 .modal-backdrop 的 computed z-index 值。Bootstrap 5 默认是 .modal-backdrop: 1040、.modal: 1050，但如果你发现两者数值相等或 .modal 更小，问题就在这儿。
常见诱因不是你没写 z-index，而是：
– 某个父容器（比如 React 的 div#root 或 Vue 的 <app></app>）加了 position: relative 且带 z-index，把 .modal 关进了低层级的层叠上下文里
– 自定义 CSS 里写了 .modal { z-index: auto } 或 unset，覆盖了默认值
– 第三方库（如某些 admin 模板）重写了 $zindex-modal 却漏改 $zindex-modal-backdrop
临时验证：在 Elements 面板里手动给 .modal 加 z-index: 1055，如果立刻显示正常，说明就是层级被压住，不是渲染或 JS 错误。
模态框挂载位置错误，导致 z-index 失效
Bootstrap 要求 .modal 元素必须是 document.body 的直系子节点，否则父级的 position + z-index 会创建新层叠上下文，让 z-index: 1050 只在那个小范围里生效。
React/Vue 项目最容易踩这个坑：
– 不要用 return <modal></modal> 直接写在组件内部，它会插进当前组件 DOM 树里
– Vue 3 用 <teleport to="body"></teleport>
– React 用 createPortal(modalElement, document.body)
– 原生 JS 可以手动移动：document.body.appendChild(modalEl)，注意要在 show.bs.modal 事件触发前执行
检查方法很简单：选中 .modal 元素，看它的父节点是不是 body。如果不是，哪怕只隔了一层 div，都可能出问题。
多个模态框同时打开时 z-index 乱序
Bootstrap 官方不支持多层 Modal，它的插件是单例设计——共享一个 .modal-backdrop、一套滚动锁、一个焦点管理器。强行调两次 show()，第二个 Modal 很可能被卡在底层，或者点不到按钮。
如果你真要临时撑住两层（比如主表单 + 删除确认），必须动态调整：
– 监听 show.bs.modal 事件
– 用 $('.modal:visible').length 算当前已展开数量
– 给当前 Modal 设 z-index: 1055 + (10 * count)
– 同步把最新生成的 .modal-backdrop 设为 z-index: 新值 - 1
– 注意不要用 hide.bs.modal 清 z-index，因为 DOM 还没完全移除，容易错判
这方法只是“能动”，不是“该用”。绝大多数场景下，嵌套 Modal 是交互设计缺陷，应改用折叠面板、选项卡或内联确认代替。
下拉菜单、UEditor 工具栏被 Modal 截断
这类问题不是子元素 z-index 不够高，而是它们的父容器（比如 .modal-content 或 .accordion-item）已经设了 z-index 并定位，把所有子内容锁死在自己的层叠上下文里。
典型表现：
– UEditor 工具栏默认 z-index: 900，Modal 是 1050，但它在 Modal 内部渲染，所以永远出不来
– 下拉菜单在手风琴里展开一半就被截掉，因为 .accordion-item 缺少 position: relative，导致所有下拉都按文档流堆叠，后渲染的盖住先渲染的
解法分两类：
– 对 UEditor 等第三方编辑器：改其配置项，比如 UEditor.config.js 中的 zIndex，设为 1060 以上
– 对 Bootstrap 自身组件：确保触发元素的最近定位祖先有足够高的 z-index，例如给 .accordion-item 加 position: relative 和递增的 z-index
真正难处理的是那些隐式触发层叠上下文的属性：只要父级有 transform、opacity 、<code>filter 或 will-change，子元素再高的 z-index 也破不了圈。这时候只能把弹层移出父容器，挂到 body 下。
