弹出层包括模态对话框、提示条、popover、alert。它们都可以用来提示或者警告用户,或者显示详细信息。
模态对话框
模态对话框就是一个对话框,它在继续下一步工作前来提示重要信息给用户,并可能会要求用户做出不同操作的选择。
如下代码可以点击一个按钮,弹出模态对话框:
<a class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal">Launch</a>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">title1</h4>
</div>
<div class="modal-body">
<p>Body1</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
模态对话框的DOM结构嵌套的有点深。使用类来表达这个层次,看起来是这样的:
-.modal
--.modal-content
----.modal-header
----.modal-body
----.modal-footer
就是说,一个模态对话框内部有header、body、footer构成。可以使用data属性来做模态对话框的弹出和关闭。第一行代码中的data-toggle=”modal”表示做模态切换,data-target=”#myModal”表示切换的目标为id等于myModal的元素。另外应该说明的是这行代码:
<button type="button" class="close" data-dismiss="modal">×</button>
其中的内容×
表示的就是乘号(✖️),常常用来做关闭按钮的图标。类似的这个按钮也使用了data属性(data-dismiss=”modal”)做模态关闭。
tooltip
当鼠标移动到a标签上,默认会显示一个提示条,内容为title指定的:
<a href="#" title="tooltip">foo</a>
想要这个提示条酷一点的话,可以加入两个data属性:
<a href="#" data-toggle="tooltip" data-placement="right" title="tooltip">foo</a>
并且加入JavaScript代码:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
属性data-placement只是提示条的位置,可以是“top | bottom | left | right | auto”。我们再次看到data-toggle,这里是切换tooltip的显示。
一个看起来比较符合bootstrap风味的提示条就出来了。
popover
用来显示当前元素的补充信息。和提示条(tooltip)只能有内容相比,前者显示信息可以由页头和主体。代码如下:
<button type="button" class="btn btn-primary" data-toggle="popover" title="title" data-content="content">Popover</button>
并且需要加入JavaScript代码,用来启动popover,并设置它的显示位置:
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'right'
});
});
你需要为当前元素加入属性data-toggle=”popover”表示做popover切换,title=”title”放入popover的标题,data-content=”content”放入popover的内容。
alert
用来弹出需要用户立刻注意到,如警告和确认类的信息。比如:
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
这是一个alert,类型为alert-warning,因此是一个警告型的alert。相应的,还可以选择alert-danger、alert-info、alert-success等类型。
代码:
<a href="#" class="close" data-dismiss="alert">×</a>
提供了一个关闭按钮,它的data-dismiss=”alert”属性表明,点击之可以关闭alert。