最直接的解决方式是设置 data-backdrop="static"，它保留灰色遮罩但禁用点击关闭；需配合 tabindex="-1" 和 aria-hidden="true" 使用，JS 初始化时可额外传 backdrop: 'static' 与 keyboard: false 实现双重保险。
data-backdrop="static" 是最直接的解决方式
bootstrap 模态框默认点击灰色背景（backdrop）会关闭，本质是 data-backdrop 默认为 true。设成 static 就能阻止关闭，同时保留灰色遮罩——既不消失也不响应点击。
-
data-backdrop="true"：点击即关（默认行为） -
data-backdrop="false"：完全不显示灰色背景，模态框“悬空”在页面上，常导致视觉突兀和焦点混乱 -
data-backdrop="static"：显示灰色背景，但点击它无效——这才是你要的效果
推荐写在 modal 根元素上，例如：
<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true" data-backdrop="static">
JS 初始化时传参更灵活，适合动态控制
如果 modal 是 JS 动态创建或需按场景切换行为，用 .modal() 方法传参比写死 HTML 更可控。比如用户未填完表单时禁用关闭，填完再恢复。
- 禁用背景关闭 + 禁用 ESC：
$('#myModal').modal({ backdrop: 'static', keyboard: false }); - 只禁背景、留 ESC（谨慎）：
{ backdrop: 'static' }，但用户仍可误按 ESC 退出，多数业务场景建议一并关掉 - 注意：
keyboard: false生效的前提是 modal 元素有tabindex="-1"，否则会被忽略
常见失效原因：aria-hidden 和 tabindex 缺一不可
即使写了 data-backdrop="static"，modal 仍可能点不中、关不掉、键盘失灵——大概率是缺失关键属性。
- 必须带
tabindex="-1"：这是 Bootstrap 判断“是否可聚焦模态框”的依据，缺了keyboard配置就无效 - 必须带
aria-hidden="true"：不仅为无障碍，也参与 Bootstrap 内部状态管理；漏掉可能导致初始化异常或多次触发 - 别用
aria-hidden="false"：这会让屏幕阅读器误判 modal 已打开，但实际 DOM 还没 ready，造成逻辑错乱
全局设置要小心，容易污染其他弹窗
有人图省事改全局默认：
$.fn.modal.Constructor.DEFAULTS.backdrop = 'static';看似一劳永逸，但代价明显：
- 所有 modal（包括确认框、提示框、第三方插件弹窗）都失去点击关闭能力
- 后续维护者很难定位为什么某个弹窗“关不掉了”，排查成本高
- 升级 Bootstrap 版本后，
Constructor.DEFAULTS路径可能变化，导致静默失效
真正需要全局约束的场景极少，优先用 HTML 属性或单次 JS 调用，把控制权留在具体业务上下文中。
最稳妥的做法是：HTML 中写死 data-backdrop="static" + tabindex="-1" + aria-hidden="true"，再在 JS 显示前加一次 .modal({ backdrop: 'static', keyboard: false }) 做双重保险。多写两行，少 debug 半小时。
