Bootstrap - 弹出框制作
2018-01-26 本文已影响36人
廖马儿
弹出框（模态框）Modal.
弹出框是一个经常使用的组件，一般用于弹出提示信息，确认信息，表单等内容。
图片.png
代码：
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
解析：
弹出框可以分为三部分：
1）弹出框头部
2）弹出框主体
3）弹出框脚部
这个是弹出框的包裹，只有包裹这三层才能是一个弹出框：
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
然后是模态框头部：
<div class="modal-header">
然后是模态框主体：
<div class="modal-body">
然后是尾部：
<div class="modal-footer">
弹出框一般放在<body>元素中，一般都是放在</body>上面。
尾部中如果一个按钮有data-dismiss="modal"属性，那么它就是可以关闭的：
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
data-toggle与data-target
data-toggle + data-target
data-toggle:数据关联
data-target:数据目标 （关联到 #id 去）
组合在一起，可以是一个事件。
使用方式:
<li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
....
<div class="modal fade" id="about" tabindex="-1" role="dialog">
注意：上面的data-toggle="modal"与data-target="#about"， data-target指向的是id，我们可以看到id。
