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

已于 2025-02-01 20:16:09 修改
阅读量2.2k 收藏 14
点赞数 25
分类专栏： Ajax技术从入门到实战 文章标签： bootstrap 前端 ajax javascript html5 css3 vscode
于 2025-01-27 08:54:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2402_84971234/article/details/145374524
版权

目录

目标：

步骤：

代码详解：

1. 引入外部资源（HTML）：

2. 创建触发按钮（HTML）：

3. 创建弹框结构（HTML）：

4. 完整的代码（HTML）：

代码总结：

提示：

目标：

本示例将帮助你通过Bootstrap实现一个简单的弹框（Modal）。弹框可以在点击按钮时显示，并且通过Bootstrap提供的JavaScript和CSS样式来实现弹框的效果。你将学习如何创建一个按钮，点击按钮后显示弹框，弹框包含头部、中部和底部，以及如何使用Bootstrap的类和属性控制弹框的显示与隐藏。

步骤：

  1. 引入Bootstrap CSS和JavaScript文件： 通过CDN引入Bootstrap的CSS和JS文件，这些文件负责弹框的样式和交互效果。

  2. 创建一个按钮来触发弹框显示： 使用HTML创建一个按钮，点击时触发弹框的显示。使用data-bs-toggle="modal"来指定该按钮触发一个模态框，data-bs-target指定目标模态框的类名。

  3. 定义弹框的结构： 弹框包括头部（显示标题和关闭按钮）、中部（显示内容）、底部（显示关闭按钮和其他功能按钮）。

  4. 使用JavaScript控制弹框行为： 引入Bootstrap的JavaScript文件来提供弹框的显示与隐藏功能。

代码详解：

1. 引入外部资源（HTML）：

首先，我们通过CDN引入了Bootstrap的CSS和JavaScript文件，使得页面能够使用Bootstrap提供的样式和交互功能。

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

接着，引入Bootstrap的JavaScript文件，它提供了弹框的交互功能。

<!-- 引入bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
2. 创建触发按钮（HTML）：

接下来，我们创建一个按钮，用于点击触发弹框显示。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）：

弹框结构包括头部（显示标题和关闭按钮）、中部（弹框的主要内容）、底部（显示关闭按钮和其他功能按钮）。

<!-- 弹窗 -->
<div class="modal fade myBox" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 弹窗头部 -->
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">这是弹窗头部</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">Close</button>
        <button type="button" class="btn btn-primary">这是弹窗底部</button>
      </div>
    </div>
  </div>
</div>

  • 弹框头部：包含弹框的标题和一个关闭按钮，点击关闭按钮会自动关闭弹框。

    <div class="modal-header">
  <h1 class="modal-title fs-5" id="staticBackdropLabel">这是弹窗头部</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">Close</button>
  <button type="button" class="btn btn-primary">这是弹窗底部</button>
</div>
4. 完整的代码（HTML）：

现在，我们将所有的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>
  <!-- 
    目标：使用Bootstrap弹框
    1. 引入bootstrap.css 和 bootstrap.js
    2. 准备弹框标签，确认结构
    3. 通过自定义属性，控制弹框的显示和隐藏
  -->

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

  <!-- 弹窗 -->
  <div class="modal fade myBox" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- 弹窗头部 -->
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">这是弹窗头部</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">Close</button>
          <button type="button" class="btn btn-primary">这是弹窗底部</button>
        </div>
      </div>
    </div>
  </div>

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

</html>

代码总结：

  • HTML结构：创建一个按钮，点击后显示一个弹框。弹框内有头部、中部和底部。
  • Bootstrap资源：引入了Bootstrap的CSS和JavaScript文件，确保样式和交互功能生效。
  • 弹框行为：通过设置 data-bs-toggle="modal" 和 data-bs-target 属性来控制弹框的显示。

提示：

  • 在实现弹框时，请确保Bootstrap的CSS和JavaScript文件被正确引入，否则弹框不会正常工作。
  • 弹框的关闭功能是由 data-bs-dismiss="modal" 属性实现的，点击任何带有该属性的按钮都会关闭弹框。

这样，你可以快速了解并实现Bootstrap弹框功能。如果有任何问题，欢迎随时提问！

Bootstrap 弹出框
froginwe11的博客
03-25 500
Bootstrap 弹出框是一个功能强大、易于使用的组件，可以帮助开发者快速构建高质量的前端界面。通过本文的介绍，相信读者已经对 Bootstrap 弹出框有了全面的了解。在实际项目中，灵活运用 Bootstrap 弹出框，可以提升用户体验和搜索引擎优化效果。
Bootstrap5 消息弹窗
最新发布
lsx202406的博客
04-09 280
Bootstrap5的消息弹窗组件是一个功能强大且易于使用的工具，可以帮助开发者构建丰富的用户体验。通过本文的介绍，相信你已经对Bootstrap5的消息弹窗组件有了全面的了解。在实际开发中，可以根据需求灵活运用这些组件，为用户带来更好的交互体验。
Bootstrap弹出框
07-18
Bootstrap弹出框
bootstrap弹出框
oiaa的博客
12-05 431
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
JS组件Bootstrap实现弹出框和提示框效果代码
weixin_30462049的博客
06-08 675
JS组件Bootstrap实现弹出框和提示框效果代码 作者：懒得安分 字体：[增加 减小] 类型：转载 时间：2015-12-08 我要评论 这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码，对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言：对于Web开发人员，弹出框和提示框的使用肯定不会陌生，比如常见的表格新增和编辑功能，一般常见的主要有两...
Bootstrap <基础三十二>模态框（Modal）插件
05-18 573
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能，那么您需要引用modal.js。或者，正如Bootstrap 插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。 用法 您可以切换模态框（...
BootStrap中的模态框（modal，弹出层）功能示例代码
10-17
7. 数据属性：Bootstrap模态框支持使用数据属性来传递参数，如`data-whatever`，可以在JavaScript事件处理程序中获取这些值，实现动态内容。 8. 自定义内容：通过JavaScript或jQuery，可以动态地改变模态框的内容，...
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
08-31
在使用Bootstrap框架构建网页时，有时会遇到一个常见的问题，那就是Bootstrap弹出框（modal）中的输入框（input）无法获得焦点。这个问题通常发生在尝试在已存在的modal之上再弹出一个新的modal层时，由于Bootstrap...
基于bootstrap风格的弹框插件
08-31
【基于Bootstrap风格的弹框插件】是一种用于创建交互式对话框的JavaScript工具，它遵循了Bootstrap框架的设计规范，提供了一种简洁、易用的方式来实现确认框和提示框功能。这个插件允许开发者在网页中快速添加弹出...
Bootstrap框架模态框（Modal）中的多步骤表单
u010674101的专栏
08-01 542
这是一个多步骤表单的变种，通过模态框（也称为弹出框或对话框）呈现。模态框是一种覆盖在当前页面上的浮动窗口，用于显示重要信息或提示用户进行操作。在这个例子中，多步骤表单被嵌入到模态框中，用户点击页面上的按钮后弹出模态框显示表单。在页面上点击按钮弹出多步骤框，可以使用模态框（Modal）来实现。这种方式可以通过Bootstrap的模态框组件结合JavaScript来完成。
Bootstrap4 弹出框
12-13
Bootstrap4 弹出框 弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。 如何创建弹出框 通过向元素添加 data-toggle=”popover” 来来创建弹出框。 title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容： 多次点我 注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。 以下实例可以在文档的任何地方使用弹出框： 实例 $(document).ready(function(){ $(&#39;[data-toggle="popover"]&#39;
bootstrap model弹出框的使用
weixin_30640291的博客
05-05 493
之前，我们讲解了bootstrap tab的使用，今天我们来了解下bootstrap 中model弹出窗的使用。 效果： 代码： <input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.as...
Bootstrap 弹框
m0_57184906的博客
03-24 633
不离开当前页面，显示单独内容，供用户操作。
Bootstrap 弹出框（Popover）插件
lluohuih的专栏
02-10 3430
Bootstrap 弹出框（Popover）插件 弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。 如果您想要单独引用该插件的功能，那么您需要引用 popover.
Bootstrap 自定义弹框
uj
07-24 1298
原理 导入 Bootstrap 和 Font Awesome 传入 三个参数 分别表示，弹框中显示的 文字信息， 图标样式 ， 是否自动关闭 图标链接 Fontawsome 代码 html &lt;!-- data-backdrop="false" 可去除遮罩层 --&gt; &lt;div class="modal fade bd-example-mo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值