bootstrap关闭模态框_bootstrap模态框点击框外隐藏

在Bootstrap中，当使用模态框（Modal）时，默认情况下是允许用户通过点击模态框外部区域来关闭模态框的。如果你发现模态框无法通过点击外部区域关闭，或者想要确保这种功能正常工作，可以按照以下方法进行设置。

解决方案

通常只需要确保正确配置了模态框的相关属性，并且没有额外阻止默认行为的代码。如果需要自定义控制，可以通过JavaScript或CSS来实现。

一、确保默认行为有效

检查模态框是否按照官方文档正确初始化。对于Bootstrap 4和5，确保你的HTML结构类似如下：

html
<!-- Button trigger modal --></p>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<p><!-- Modal --></p>

<div class="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<p>

注意data-bs-backdrop和data-bs-keyboard属性：
- data-bs-backdrop：默认为true，表示点击背景可关闭；设置为static则不可关闭。
- data-bs-keyboard：默认为true，表示按下ESC键可关闭。

二、通过JavaScript强制执行

如果你希望确保点击外部一定可以关闭模态框，可以通过JavaScript来增强这一功能：

javascript
// 使用事件委托监听整个document上的点击事件
$(document).on('click', function(event) {
  // 获取当前显示的所有模态框
  var modals = $('.modal.show');</p>

<p>if(modals.length > 0){
    // 如果点击发生在模态框外部，则关闭模态框
    if (!modals.is(event.target) && modals.has(event.target).length === 0) {
      modals.modal('hide');
    }
  }
});

这段代码适用于jQuery版本的Bootstrap。对于纯JavaScript版本，你可以这样写：

javascript
document.addEventListener('click', function(event) {
  const modals = document.querySelectorAll('.modal.show');</p>

<p>if (modals.length > 0) {
    let target = event.target;
    let clickedOutside = true;</p>

<pre><code>modals.forEach(function(modal) {
  if (modal.contains(target)) {
    clickedOutside = false;
  }
});

if (clickedOutside) {
  modals.forEach(function(modal) {
    const bootstrapModal = bootstrap.Modal.getInstance(modal);
    if (bootstrapModal) {
      bootstrapModal.hide();
    }
  });
}

}
});

三、CSS解决方案

虽然不推荐仅依赖CSS来实现此功能，但如果你只是想调整模态框的行为，可以通过CSS增加一个较大的透明遮罩层来实现点击外部关闭的效果：

css
/* 增加遮罩层 <em>/
.modal-backdrop {
  z-index: 1040 !important; /</em> 确保遮罩层在最上层 */
}</p>

<p>/* 调整模态框层级 */
.modal {
  z-index: 1050 !important;
}

然后在HTML中添加data-bs-backdrop="true"以启用点击遮罩关闭功能。

以上几种方法可以帮助你在不同的场景下实现点击模态框外部区域关闭模态框的需求。根据实际情况选择最适合的方式即可。