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>

尝试一下

输出结果如下：

定义和使用

定位弹出框

关闭弹出框

相关页面