如何阻止Bootstrap模态框因点击页面主体而自动隐藏？

方法一：Bootstrap原生属性配置 #

这是最直接的方式，无需额外编写JS逻辑：

• 在模态框的HTML标签上添加data-backdrop="static"，即可禁止点击外部区域关闭模态框
• 如果同时需要禁止按ESC键关闭，再追加data-keyboard="false"

示例代码：

<div class="modal fade" id="myModal" data-backdrop="static" data-keyboard="false">
  <!-- 模态框内容区域 -->
</div>

如果是通过JS代码初始化模态框，也可以直接传入配置项：

$('#myModal').modal({
  backdrop: 'static',  // 禁用外部点击关闭
  keyboard: false      // 可选：禁用ESC键关闭
});

方法二：通过hide.bs.modal事件拦截 #

如果需要更灵活的控制（比如仅在特定条件下阻止关闭），可以利用Bootstrap的hide.bs.modal事件——这个事件在模态框开始隐藏前触发，刚好能通过e.preventDefault()阻止关闭动作。

比如判断是否是点击外部区域导致的隐藏，再决定是否阻止：

$('#myModal').on('hide.bs.modal', function(e) {
  // 点击外部区域时，触发事件的目标元素是.modal容器
  if ($(e.target).hasClass('modal')) {
    e.preventDefault();
  }
});

注意：你之前使用的hidden.bs.modal是模态框完全隐藏后才触发的，因此无法阻止关闭动作，替换成hide.bs.modal即可解决这个问题。

内容的提问来源于stack exchange，提问作者McMurphy