使用Bootstrap（JS控制）实现弹框（Modal）功能的完整教程

还是鼠鼠

已于 2025-02-01 20:16:29 修改

阅读量952

点赞数 14

分类专栏： Ajax技术从入门到实战文章标签： ajax 前端 javascript html5 css3 vscode bootstrap

于 2025-01-28 18:14:00 首次发布

本文链接：https://blog.youkuaiyun.com/2402_84971234/article/details/145388263

版权

Ajax技术从入门到实战专栏收录该内容

49 篇文章

订阅专栏

目标

实现步骤

1. 引入 Bootstrap 的 CSS 和 JavaScript 文件

目标

本示例将帮助你通过 Bootstrap 创建一个简单的弹框（Modal）。点击按钮后显示弹框，弹框包括头部（标题和关闭按钮）、中部（内容区域），以及底部（操作按钮）。整个功能依赖于 Bootstrap 提供的 JavaScript 和 CSS 文件，且不需要额外复杂的自定义代码。

学习点：

引入 Bootstrap 的 CSS 和 JavaScript 文件以支持弹框样式和交互功能。
创建按钮触发弹框的显示。
定义弹框的结构，包括头部、中部和底部。
使用 Bootstrap 的类和属性，轻松实现弹框的显示与隐藏功能。

实现步骤

1. 引入 Bootstrap 的 CSS 和 JavaScript 文件

通过 CDN 引入 Bootstrap 的资源文件：

CSS 文件：负责页面的样式。
JavaScript 文件：提供交互功能（如弹框显示与隐藏）。

<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入 Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>

2. 创建触发弹框的按钮

定义一个按钮，通过设置 data-bs-toggle="modal" 和 data-bs-target 属性来控制弹框的显示：

data-bs-toggle="modal"：标记这是一个用于触发弹框的按钮。
data-bs-target=".myBox"：指定目标弹框的类名。

<!-- 按钮用于触发弹框显示 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".myBox">
  显示弹框
</button>

3. 定义弹框的结构

创建弹框组件的 HTML 结构，分为以下几部分：

头部 (Header)：显示标题和关闭按钮。
中部 (Body)：弹框的主要内容区域。
底部 (Footer)：包含关闭和其他功能按钮。

<!-- 弹框 -->
<div class="modal fade myBox" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 弹框头部 -->
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">弹框标题</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <!-- 弹框中部 -->
      <div class="modal-body">
        这是弹框的主要内容区域。
      </div>
      <!-- 弹框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

完整代码(HTML)

以下是完整代码，可以直接复制并运行。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 弹框示例</title>
  <!-- 引入 Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <!-- 按钮：显示弹框 -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".myBox">
    显示弹框
  </button>

  <!-- 弹框 -->
  <div class="modal fade myBox" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- 弹框头部 -->
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">弹框标题</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <!-- 弹框中部 -->
        <div class="modal-body">
          这是弹框的主要内容区域。
        </div>
        <!-- 弹框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">保存更改</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入 Bootstrap JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
</body>

</html>

代码解析

弹框的显示和隐藏：
- 点击按钮时，弹框会显示。
- 点击任意带 data-bs-dismiss="modal" 的按钮（如关闭按钮）时，弹框会隐藏。
弹框的组件结构：
- modal-header：标题和关闭按钮。
- modal-body：显示弹框的内容。
- modal-footer：操作按钮区域。
Bootstrap 提供的交互功能：
- 无需额外 JavaScript 代码，只需要在 HTML 中添加属性即可完成弹框功能。