Bootstrap 显示模态框

2401_84831823

于 2024-05-14 00:41:40 发布

阅读量918

点赞数 12

分类专栏：程序员文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/2401_84831823/article/details/138825903

版权

程序员专栏收录该内容

114 篇文章 0 订阅

订阅专栏

在我们的实际生活中，当你打开某一个网页的时候，会弹出来一个框，那么这个框呢，目前在小编的认知中就是模态框啦，下面我们来看一下具体的代价

代码展示

创建一个模态框

使用Bootstrap创建模态框

这是一个模态框标题

模态框中的文本

你可以在这添加一些文本。

唤醒活动

关闭

发动演示模态框

解释

下面的表格是对于上面代码的解释，它帮助我们更好的理解如何使用模态框

代码	解释
div id="example"	分配给相关 div的 id，id的值指向后边要实现 modal（模态框）的 JavaScript。
class="modal hide fade in"	Bootstrap CSS的四个 class - modal、hide、fade和 in，用于设置 modal（模态框）的布局。
style="display: none;	用于保持模态窗口可见，直到触发器触发（比如点击相关按钮）。
<div class="modal-header">	modal-header适用于定义模态窗口标题样式的 class。
a class="close"	CSS class close用于设置模态窗口关闭按钮的样式。
data-dismiss="modal"	data-dismiss是一个定制的 HTML5 data属性。用于关闭模态窗口。
class="modal-body"	modal-body是 Bootstrap的一个 CSS class，用于设置模态窗口主体的样式。
class="modal-footer"	modal-footer是 Bootstrap的一个 CSS class，用于设置模态窗口尾部的样式。
class="btn btn-success"	CSS class btn和 btn-success用于在模态窗口的尾部创建一个大号的按钮。您可以使用任何其他 Bootstrap按钮代替。
class="btn"	Bootstrap CSS的按钮 class btn，用于在模态窗口的尾部创建一个小号的按钮。
data-dismiss="modal"	HTML5定制的 data属性 data-dismiss，用于关闭模态窗口。
data-toggle="modal"	HTML5定制的 data属性 data-toggle，用于打开模态窗口。
class="btn btn-primary btn-large"	设置按钮样式，点击该按钮则创建模态窗口。
<script src="https://ajax.googleapis.com/ajax/libs /jquery/1.7.1/jquery.min.js"></script>	引用 Jquery文件。
<script src="../bootstrap/twitter-bootstrap-v2> /js/bootstrap-modal.js"></script>	引用 bootstrap modal（模态框）的 JS文件。

Bootstrap多层模态框如何嵌套

<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>bootstrap模态框(modal)</title> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="../../js/jquery-2.1.1.min.js"></script> <script src="../../js/bootstrap.min.js"></script>  <script> $(function(){ $("#btn2").click(function(){ $("#show2").modal("show"); }); }) </script> </head> <body> <div class="container "> <h1 class="page-header">bootstrap模态框(modal)</h1> <button class="btn btn-primary" data-toggle='modal' data-target='#show'>登陆</button> <div class="modal fade " id='show' > <div class="modal-dialog"> <div class="modal-content"> <button class="close" data-dismiss='modal'>×</button> <h1 class="modal-title">一层模态框</h1> <div class="modal-footer"> <button class="btn btn-primary" **data-toggle='modal'** id="btn2">再弹</button> </div> </div> </div> </div> <div class="modal fade " id='show2'> <div class="modal-dialog"> <div class="modal-content"> <button class="close" data-dismiss='modal'>×</button> <h1 class="modal-title">二层模态框</h1> <div class="modal-body"> 12312312 </div> <div class="modal-footer"> </div> </div> </div> </div> </div> </body> </html> data-toggle=‘modal’ id=“btn2”>再弹

12312312

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，不论你是刚入门Java开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618164986)

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84831823

关注

12
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 显示模态框

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
复制链接

扫一扫