<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
</head>
<style>
</style>
<body>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">button</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">X</button>
<div class="modal-title">title</div>
</div>
<div class="modal-body">
aaaaaaaaaaa
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">yes</button>
<button class="btn btn-primary" data-dismiss="modal">no</button>
</div>
</div>
</div>
</div>
</body>
</html>
modal-body:窗口主要内容区域。
modal-footer:窗口底部区域。(底部一般写确认和取消按钮)
在确认和取消按钮上绑定data-dismiss=“modal”来关闭模态框。
过渡效果:
在默认情况下,模态框、弹出框、选项卡是有过渡效果的。
模态框:弹出一个窗,这个窗是子窗体,子窗体覆盖了父窗体。
通过data属性来调用。
data-toggle=“modal”:用于打开modal窗口。
data-target=“#idName”:打开的目标。
模态窗口有两个基类:
modal:把div元素识别成模态框。
fade:当窗口切换,淡入淡出的效果。
模态窗口需要以下几个类来支撑:
modal-dialog:对话框。
modal-content:内容。
modal-header:模态框里的页头。
modal-title:模态框标题。
close:关闭按钮的样式。
data-dismiss="modal":关闭模态框。
(虽然之前写了close的关闭图标,但是它是一个CSS样式,为关闭按钮设置样式。但是data-dismiss="modal"才是关闭按钮的行为。)
backdrop是用来定制模态窗口的外观和感观的选项,而不是方法。