禁用点击遮罩层关闭模态框的唯一可靠方案是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"> - 如果模态框是 JS 动态创建的，初始化时传参更灵活：
$('#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 的点击事件误触发到父级容器。
- Bootstrap 5 默认：
.modal-backdrop是z-index: 1040，.modal是z-index: 1050 - 常见干扰源：
.navbar-fixed（1030）、第三方 toast（1090）、自定义弹窗（手写 z-index: 9999） - 检查方法：打开 DevTools，选中
.modal，看 computedz-index是否真为1050；再看其父节点是否是<body> - 错误实践：给
.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 就已覆盖全部边界条件。别为了省一行代码，把焦点、滚动、键盘全扔给业务层兜底。
