禁用点击遮罩层关闭模态框的唯一可靠方案是data-bs-backdrop="static"，并配合keyboard: false禁用esc键；设为false会移除遮罩导致悬空、滚动穿透和焦点丢失。

data-bs-backdrop="static" 是唯一可靠方案

Bootstrap 5 中禁用点击遮罩层关闭模态框，必须用 data-bs-backdrop="static"，不是 false，也不是省略。设成 false 会直接移除整个 .modal-backdrop DOM 节点，导致模态框“悬空”，可能引发焦点丢失、滚动穿透或意外关闭；而 "static" 才是语义上“有遮罩但不响应点击”的标准行为。

• 必须写在 modal 根元素上，例如：<div class="modal fade" id="myModal" data-bs-backdrop="static" tabindex="-1" aria-hidden="true"> <li>如果模态框是 JS 动态创建的，初始化时传参更灵活：<code>$('#myModal').modal({ backdrop: 'static' })
• 单独设 backdrop: 'static' 不够保险：用户仍可按 ESC 关闭，建议同步加 keyboard: false

为什么只禁 backdrop 不够？ESC 键常被忽略

很多开发者只改了 backdrop，没关 keyboard，结果测试时一切正常，上线后用户随手一按 ESC 就退出——尤其表单未保存场景下极易丢数据。

• keyboard: false 会彻底禁用 ESC 键触发 hide 事件
• 若需保留 ESC（极少数场景），务必确认业务逻辑能安全中断，且提供明确视觉提示（比如禁用状态下灰掉「取消」按钮）
• 在 Vue/React 中用 teleport 或 createPortal 渲染 modal 时，JS 初始化方式仍是首选，HTML 属性可能因挂载时机晚于初始化而失效

z-index 冲突会让 backdrop 看似“失效”

有时你明明写了 data-bs-backdrop="static"，点击背景却仍关闭，真实原因可能是模态框被其他高 z-index 元素压住，导致 backdrop 的点击事件误触发到父级容器。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• Bootstrap 5 默认：.modal-backdrop 是 z-index: 1040，.modal 是 z-index: 1050
• 常见干扰源：.navbar-fixed（1030）、第三方 toast（1090）、自定义弹窗（手写 z-index: 9999）
• 检查方法：打开 DevTools，选中 .modal，看 computed z-index 是否真为 1050；再看其父节点是否是
• 错误实践：给 .modal 加 position: relative —— 这会创建新层叠上下文，让内部 z-index 失效

禁用 backdrop 后的交互细节容易翻车

data-bs-backdrop="false" 确实能完全移除遮罩层，但它带来三个隐性问题：

• 页面内容可点击，但模态框失去视觉隔离，用户易误操作背景区域
• 滚动仍可能穿透到 body（尤其 iOS Safari），需手动加 body { overflow: hidden }
• 焦点管理失效：Tab 键可能跳出 modal，需自行实现 focus trap（Bootstrap 不自动处理）

真正需要“无遮罩”的场景极少；多数时候你要的只是“不响应点击”，那 data-bs-backdrop="static" + keyboard: false 就已覆盖全部边界条件。别为了省一行代码，把焦点、滚动、键盘全扔给业务层兜底。