在我们的实际生活中,当你打开某一个网页的时候,会弹出来一个框,那么这个框呢,目前在小编的认知中就是模态框啦,下面我们来看一下具体的代价
代码展示
创建一个模态框
使用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文件。 |
<script src="../bootstrap/twitter-bootstrap-v2> | 引用 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> <!--jquery必须是1.9.0版本以上的 --> <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)
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!