<p>必须同时设置 data-bs-backdrop="static" 和 data-bs-keyboard="false" 才能彻底禁用模态框关闭：前者阻止点击背景关闭，后者禁用 ESC 键关闭；仅设其一或使用错误值（如 false、漏 bs- 前缀）均会导致意外关闭。</p>
data-bs-backdrop="static" 是唯一可靠方案
想让 bootstrap modal 点击背景不关闭，必须用 data-bs-backdrop="static"，不是 false，也不是省略。bootstrap 5 中 data-bs-backdrop="false" 会彻底移除遮罩层（包括 dom 节点），但模态框仍可能因 focus trap 或滚动穿透意外关闭；而 "static" 才是设计上“有遮罩但不响应点击”的语义。
常见错误现象：
- 写了
data-backdrop="static"（漏了bs-前缀）→ 完全无效，降级为默认行为 - 同时设了
data-bs-keyboard="false"却忘了加data-bs-backdrop="static"→ Esc 键禁用了，但点背景照常关 - 在 JS 初始化时传
{ backdrop: 'static' }，但 HTML 里又没写对应属性 → 某些版本（如 5.3.3）中属性优先级更高，JS 配置被覆盖
JavaScript 初始化时 backdrop 和 keyboard 必须配对禁用
仅靠 HTML 属性不够稳定，尤其在动态创建或 React/Vue 环境中。JS 调用时必须显式同步配置两个关键项，否则行为不可控。
实操建议：
- 始终用
$('#myModal').modal({ backdrop: 'static', keyboard: false })启动，不要只设一个 - 如果模态框由第三方组件（如 react-bootstrap）驱动，需查文档确认它是否透传
backdrop和keyboard到原生 Bootstrap 实例 - 避免在
shown.bs.modal事件里再调.modal('handleUpdate')—— 这不会重载 backdrop 行为，纯属多余
隐藏 backdrop 的 CSS 方案已失效且不推荐
网上流传的“改 .modal-backdrop { opacity: 0 !important }”在 Bootstrap 5.3+ 中基本无效：因为 backdrop 元素现在由 JS 动态插入/移除，且部分版本使用 rgba(0,0,0,0) 替代 opacity 控制透明度。强行覆盖 CSS 容易引发滚动穿透、焦点丢失、无障碍（a11y）校验失败等问题。
更现实的风险：
- 屏幕阅读器仍会把
.modal-backdrop当作可聚焦遮罩，opacity=0 后用户无法感知模态框已激活 - 移动端 Safari 在 backdrop 透明后可能恢复 body 滚动，导致内容错位
- 和
fade动画冲突，出现闪白或残留 DOM
嵌套 Modal 或多层弹窗时 static backdrop 会失效
Bootstrap 官方明确不支持嵌套模态框。如果你在一个已打开的 data-bs-backdrop="static" Modal 内又触发另一个 Modal，第二个 Modal 的 backdrop 会覆盖第一个，但点击区域逻辑混乱——用户点第一层背景，可能关闭第二层，也可能什么也不发生。
替代做法：
- 用单个 Modal + Tab 切换或动态加载内容，避免物理嵌套
- 若必须多层（如权限确认弹窗叠在编辑弹窗上），应手动销毁前一个 Modal 的实例：
$('#firstModal').modal('hide')，再 show 第二个 - 检查控制台是否报错
Bootstrap doesn't support nested modals—— 这不是警告，是明确的行为终止信号
最易被忽略的一点：data-bs-backdrop="static" 只阻止点击关闭，不阻止 ESC 键；哪怕你没写 keyboard 属性，它默认仍是 true。所以“点背景不关但按 ESC 还是关”，这种半生效状态，往往就是漏配 data-bs-keyboard="false" 导致的。
