使用 jQuery 和 Bootstrap 4 显示模态框

在 Web 开发中，模态框（Modal）是一种非常常见的元素，用于以弹窗的形式展示特定内容或者提示用户进行一些交互操作。本文将介绍如何使用 jQuery 和 Bootstrap 4 来显示模态框。

准备工作

首先，确保你已经引入了以下两个库：

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- 引入 Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

创建模态框元素

在 HTML 中创建一个按钮，当点击这个按钮时显示模态框：

<button id="modalButton" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h5 class="modal-title">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
        <p>这是模态框的内容。</p>
      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

在上面的代码中，我们创建了一个按钮，指定了 id 为 modalButton。这个按钮被点击时，会显示一个 id 为 myModal 的模态框。

显示模态框

要通过 jQuery 来显示模态框，我们需要将以下代码放在你的 JavaScript 文件中：

$(document).ready(function(){
  $("#modalButton").click(function(){
    $("#myModal").modal("show");
  });
});

上面的代码将在文档加载完毕后，找到 id 为 modalButton 的按钮，并绑定一个点击事件处理函数。当按钮被点击时，通过 $("#myModal").modal("show") 来显示 id 为 myModal 的模态框。

隐藏模态框

如果你想在特定情况下隐藏模态框，你可以使用以下代码：

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

使用上述代码可以通过 JavaScript 来触发模态框的隐藏操作。

以上就是使用 jQuery 和 Bootstrap 4 显示模态框的简单介绍。通过这种方式，你可以在你的网页中方便地实现弹窗效果。希望本文对你有所帮助！

更多详情请查阅 Bootstrap 4 官方文档。