Bootstrap4 如何避免点击modal外任意区域时自动隐藏modal

有以下3种常用实现方式，可根据你的使用场景选择：

• 场景1：使用HTML属性声明式初始化
  直接在modal容器元素或者触发modal的按钮上添加data-backdrop="static"属性即可，若需要同时禁用ESC键关闭模态框，可以额外添加data-keyboard="false"：

<!-- 配置添加在modal容器上的示例 -->
<div class="modal fade" id="demoModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框内容 -->
    </div>
  </div>
</div>

• 场景2：通过JavaScript手动初始化
  如果是通过JS代码主动触发modal显示，初始化时传入配置项即可：

// jQuery写法（Bootstrap4默认依赖jQuery）
$('#demoModal').modal({
  backdrop: 'static',
  keyboard: false
})

• 场景3：修改已初始化模态框的配置
  如果模态框已经完成初始化，需要动态修改关闭行为，可以直接修改实例的配置参数：

// 先获取modal实例
const modalInstance = $('#demoModal').data('bs.modal')
// 修改配置
modalInstance._config.backdrop = 'static'
modalInstance._config.keyboard = false

补充说明：backdrop参数共有三个可选值：

• 默认为true：点击遮罩层/外部区域直接关闭模态框
• 设为'static'：点击遮罩层不会关闭模态框，仅会触发模态框的抖动提示动画
• 设为false：完全不渲染遮罩层元素

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