前端Bootstrap笔记（四）完结

一.模态对话框
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<!-- 模态弹出窗是固定在浏览器中的，模态弹出窗宽度是自适应的，而且modal-dialog水平居中，当浏览器视窗大于768px时，模态弹出窗的宽度为600px -->
<!-- 可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果 -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<!-- Bootstrap框架还为模态弹出窗提供了不同尺寸，一个是大尺寸样式“modal-lg”，另一个是小尺寸样式“modal-sm” -->
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
二.data-参数说明
1.data-toggle 字符类型 默认值modal 用来控制模态弹出窗的显示，必须要在触发元素上定义一个属性值，而且只能是modal
2.data-target 字符类型 用户自定义 用来定义要触发的模态弹出窗是哪一个，其值可以是div.modal元素独有的类名，或者ID名
3.data-backdrop 布尔类型 true 是否包含一个背景为div元素，如果为真，则单击该背景时关闭弹窗，如果取值为static，则单击背景div元素时不会关闭弹出窗
4.data-keyboard 布尔类型 true 按键盘Esc键可以关闭弹出窗，如果为false，则无法通过ESC键来关闭弹出窗
5.data-show 布尔类型 true 初始化时，弹出窗是否显示
6.href URL路径 空值 如果通过a元素来触发模态弹出窗，其href值不是一个以#开头的值，则表示是一个url地址，模态弹出框会先加载其内容，然后替换原有的modal-contet中的内容，如果href设置了地址，那么data-target则必须填写制定的id