bootstrap modal 如何关闭

1. 什么是Bootstrap Modal

Bootstrap Modal 是一个 JavaScript 插件，用于在 响应式 Web 设计 中显示弹出框或对话框。它既可以用于响应式设计，也可以用于传统的网站开发中。由于 Bootstrap 是目前最受欢迎的前端框架之一，因此 Modal 在 Web 开发中非常常见。

Modal 可以用于显示各种类型的内容，例如：图片、表单、视频、警告信息、帮助文档等等。在 Modal 中可以设置各种选项，例如：显示位置，显示效果，大小，背景颜色等等。

2. 如何关闭 Bootstrap Modal

2.1 关闭按钮

最常见的关闭 Modal 的方式就是单击关闭按钮。 在 Bootstrap Modal 中会自动生成默认的关闭按钮，也可以通过添加 data-dismiss="modal" 属性手动添加。该属性用于关闭 Modal。

下面是关闭按钮的代码示例:

<!-- Modal -->

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Modal Body</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

2.2 JavaScript 方法

还可以使用 JavaScript 调用 Modal 的关闭方法来关闭 Modal。Bootstrap Modal 对象有一些方法，可以在 JavaScript 中使用这些方法来操作 Modal。

下面是使用 JavaScript 调用关闭方法的代码示例:

// 获取 Modal 对象

var modal = $('.modal');
// 关闭 Modal
modal.modal('hide');

在上面的例子中，我们首先获取了 Modal 对象 modal，然后使用 modal.modal('hide') 方法来关闭 Modal。

2.3 点击遮罩层

在 Modal 中，还可以通过单击遮罩层的方式来关闭 Modal。在 Bootstrap Modal 中默认是关闭这个选项的，而且开启这个选项可能会影响用户体验。

如果你希望开启这个选项，可以将 Modal 的 data-backdrop 属性设置为 "true"，如下所示：

<div class="modal" data-backdrop="true">

  ...
</div>

2.4 关闭附加操作

有时候，我们希望关闭 Modal 后执行一些额外的操作，例如清除表单等。在这种情况下，我们可以监听 Modal 的 hidden.bs.modal 事件，并添加一些关闭后执行的代码。

下面是监听关闭事件并执行一些附加操作的代码示例:

$('#myModal').on('hidden.bs.modal', function (e) {

  // 关闭后执行一些操作
})

3. 总结

关闭 Modal 是 Bootstrap Modal 中的一个重要操作。我们可以使用一个默认的关闭按钮或者通过使用 Modal 的 JavaScript 方法来关闭 Modal。我们还可以选择开启关闭遮罩层的选项，并且可以在 Modal 关闭后执行一些附加操作。