前言
最近小编在做一个项目,项目中用到了模态框的一些知识。在接触这个项目之前我是完全不知道模态框的,虽然原来可能见过,但是我不知道它是啥,这一次项目中算是揭开了它的庐山真面目。哈哈,一起来了解一下它是什么吧。
叙述
模态框(Bootstrap Modals)
Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能。您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件)。
实例
在我们的实际生活中,当你打开某一个网页的时候,会弹出来一个框,那么这个框呢,目前在小编的认知中就是模态框啦,下面我们来看一下具体的代价
代码展示
创建一个模态框
<div class="container">
<h2>使用Bootstrap创建模态框</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>这是一个模态框标题</h3>
</div>
<div class="modal-body">
<h4>模态框中的文本</h4>
<p>你可以在这添加一些文本。</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">唤醒活动</a>
<a href="#" class="btn" data-dismiss="modal">关闭</a>
</div>
</div>
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">发动演示模态框</a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>
解释
下面的表格是对于上面代码的解释,它帮助我们更好的理解如何使用模态框
代码 | 解释 |
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">再弹</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>
小结
以上内容只是我在项目中的一点点小小的内容, 参加项目的收获远远的大于此,其中对于一个人的心智会有很大的提升,一定要多多的锻炼自己啊。