Bootstrap 弹出框
-
定义和使用
弹出框组件类似于工具提示;它是当用户单击元素时出现的弹出框;区别在于弹出窗口可以包含更多内容。要创建弹出框提示,请将 data-toggle="popover" 属性添加到元素。使用 title 指定弹出框的标题文本;并使用 data-content 属性指定应在弹出框的正文中显示的文本:<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容">切换弹出框</a>
注意:弹出框工具提示必须使用jQuery初始化:选择指定的元素并调用 popover() 方法。以下代码将启用文档中的所有弹出窗口:
尝试一下<div class="container"> <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容">切换弹出框</a> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script>
输出结果如下: -
定位弹出框
默认情况下,弹出框将显示在元素的右侧。使用 data-placement 属性设置工具提示在元素的顶部,底部,左侧或右侧的位置:
尝试一下<div class="container"> <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容" data-placement="top">顶部</a> <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容" data-placement="bottom">底部</a> <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容" data-placement="left">左侧</a> <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容" data-placement="right">右侧</a> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script>
输出结果如下:注意:如果放置属性没有足够的空间,它们将无法按预期工作。 例如:如果您使用页面顶部的顶部位置(没有空间放置),它将在元素下方或右侧(位置允许放置空间)显示弹出框。
-
关闭弹出框
默认情况下,当再次单击该元素时,弹出框是关闭的;但是,您可以使用 data-trigger="focus" 属性,该属性将在元素外部单击时关闭弹出窗口:
尝试一下<div class="container"> <a href="#" data-trigger="focus" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容" data-placement="top">点击我</a> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script>
输出结果如下:提示:如果希望在将鼠标指针移到元素上时显示弹出框,请使用 data-trigger 属性,其值为 "hover":
尝试一下<div class="container"> <a href="#" data-trigger="hover" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容" data-placement="top">鼠标经过我</a> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script>
输出结果如下: -