jQuery 关闭 Bootstrap 模态框

在本文中，我们将介绍如何使用 jQuery 关闭 Bootstrap 模态框，并通过示例说明其使用方法和效果。

什么是 Bootstrap 模态框

Bootstrap 是一个流行的前端开发框架，提供了丰富的界面组件和样式。其中一个常用的组件就是模态框（Modal），用于显示一个弹出层来展示额外的信息或执行特定的操作。模态框具有遮罩效果，可以阻止用户对页面其他部分的交互，使用户集中在模态框上。

关闭 Bootstrap 模态框的方法

使用 jQuery 关闭模态框

Bootstrap 模态框提供了多种关闭方式，其中一种常用的方式是使用 jQuery 的方法来关闭模态框。可以通过选择模态框的 DOM 元素，使用 .modal('hide') 方法来触发关闭操作。

$('#myModal').modal('hide');

上述示例中，#myModal 是模态框的 id，通过选择器获取到对应的 DOM 元素，并通过调用 .modal('hide') 方法来关闭模态框。

添加关闭按钮

除了使用 jQuery 方法关闭模态框外，Bootstrap 还提供了一个内置的关闭按钮组件，使用该组件可以方便地关闭模态框。

首先，在模态框的 HTML 结构中添加一个按钮元素，并为其添加 data-dismiss="modal" 属性，这样点击按钮时即可触发关闭操作。

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>

JavaScript 代码触发关闭模态框

除了使用关闭按钮外，我们还可以通过在 JavaScript 中设置按钮的 click 事件来触发关闭模态框。

首先，给按钮添加一个 id，并在 JavaScript 中获取到该按钮元素。然后，通过调用 .modal('hide') 方法来关闭模态框。

<button id="closeBtn">关闭模态框</button>

<script>
  ('#closeBtn').click(function() {('#myModal').modal('hide');
  });
</script>

判断是否隐藏模态框

有时候，我们可能需要在模态框完全隐藏后再执行一些操作。可以使用 Bootstrap 提供的 .on('hidden.bs.modal', function () { ... }) 方法来实现这一功能。

$('#myModal').on('hidden.bs.modal', function () {
  // 模态框完全隐藏后执行的操作
});

上述示例中，通过选择模态框的 DOM 元素，并调用 .on('hidden.bs.modal', ...) 方法，传入一个回调函数，在模态框完全隐藏后执行特定的操作。

示例演示

下面通过一个示例来演示如何使用 jQuery 关闭 Bootstrap 模态框。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Modal</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>

  <!-- 模态框按钮 -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
  </button>

  <!-- 模态框 -->
  <div id="myModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="myModalLabel">模态框标题</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>这是一段模态框的内容。</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

  <script>
    (document).ready(function() {
      // 打开模态框('.btn-primary').click(function() {
        ('#myModal').modal('show');
      });

      // 关闭模态框('.close, .btn-secondary').click(function() {
        ('#myModal').modal('hide');
      });

      // 在模态框完全隐藏后执行的操作('#myModal').on('hidden.bs.modal', function () {
        console.log('模态框已隐藏');
      });
    });
  </script>
</body>
</html>