Bootstrap JS 弹出框参考


JS 弹出框 (popover.js)

Popover 插件类似于工具提示;它是用户单击元素时出现的弹出框。不同之处在于弹出框可以包含更多内容。

插件依赖:弹出框需要工具提示插件 (tooltip.js) 包含在您的 Bootstrap 版本中。

有关 Popover 的教程,请阅读我们的 Bootstrap Popover 教程


通过 data-* 属性

data-toggle="popover" 激活弹出框。

title 属性指定弹出框的标题文本。

data-content 属性指定应该在弹出框正文中显示的文本。

实例

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
亲自试一试 »

通过 JavaScript

弹出框不是纯 CSS 插件,因此必须使用 jQuery 进行初始化:选择指定元素并调用 popover() 方法。

实例

// 选择文档中所有带有 data-toggle="popover" 的元素
$('[data-toggle="popover"]').popover();

// 选择指定元素
$('#myPopover').popover();
亲自试一试 »


Popover 弹出框选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性,将选项名称附加到 data-,如 data-placement=""。

名称 类型 默认值 描述 试一试
animation boolean true

指定打开和关闭popover时是否添加CSS淡入淡出效果

  • true - 添加淡入淡出效果
  • false - 不添加淡入淡出效果
测试一下
container string, or the boolean false false 将弹出框附加到特定元素。
示例:容器: 'body'
测试一下
content string "" 指定弹出框正文中的文本 测试一下
delay number, or object 0 指定打开和关闭弹出框所需的毫秒数。

要指定打开延迟和关闭延迟,请使用对象结构:

delay: {show: 500, hide: 100} - 打开弹出框需要 500 毫秒,但关闭它只需 100 毫秒
测试一下
html boolean  false 指定是否接受弹出框中的 HTML 标记:
  • true - 接受 HTML 标签
  • false - 不接受 HTML 标签
注释:HTML 必须插入到 title 属性中(或使用 title 选项)。

设置为 false(默认)时,将使用 jQuery 的 text() 方法。如果您担心 XSS 攻击,请使用此选项
测试一下
placement string "right" 指定弹出框位置。可能的值:

  • "top" - 顶部弹出框
  • "bottom" - 底部弹出框
  • "left" - 左边的弹出框
  • "right" - 右边的弹出框
  • "auto" - 让浏览器决定弹出框的位置。例如,如果值为 "auto left",则弹出框将尽可能显示在左侧,否则显示在右侧。如果值为 "auto bottom",则弹出框将尽可能显示在底部,否则显示在顶部
测试一下
selector string, or the boolean false false 将弹出框添加到指定的选择器 测试一下
template string   创建弹出框时要使用的基本 HTML。

弹出框的标题将被注入到 .popover-title 中。

弹出框的内容将被注入到 .popover-content 中。

..arrow 将成为弹出框的箭头。

最外层的包装元素应该有 .popover 类。
title string "" 指定弹出框的标题文本 测试一下
trigger string "click" 指定如何触发弹出框。可能的值:

  • "click" - 通过点击触发弹出框
  • "hover" - 悬停时触发弹出框
  • "focus" - 当它获得焦点时触发弹出框(通过选项卡或单击等)
  • "manual" - 手动触发弹出框
提示: 要传递多个值,请用空格分隔它们
测试一下
viewport string, or object {selector: "body", padding: 0} 将弹出框保持在此元素的范围内。

示例: viewport: '#viewport' or {selector: '#viewport', padding: 0}

Popover 弹出框方法

下表列出了所有可用的弹出框方法。

方法 描述 试一试
.popover(options) 使用选项激活弹出框。请参阅上面的选项以获取有效值 测试一下
.popover("show") 显示弹出框 测试一下
.popover("hide") 隐藏弹出框 测试一下
.popover("toggle") 切换弹出框 测试一下
.popover("destroy") 隐藏和销毁弹出框 测试一下

Popover 弹出框事件

下表列出了所有可用的弹出框事件。

事件 描述 试一试
show.bs.popover 在即将显示弹出框时发生 测试一下
shown.bs.popover 在完全显示弹出框时发生(在 CSS 转换完成后) 测试一下
hide.bs.popover 在即将隐藏弹出框时发生 测试一下
hidden.bs.popover 在弹出框完全隐藏时发生(在 CSS 转换完成后) 测试一下

更多实例

自定义弹出框设计

使用 CSS 自定义弹出框的外观:

实例

 /* 弹出框 */
.popover {
  border: 2px dotted red;
}

/* 弹出框标题 */
.popover-title {
  background-color: #73AD21;
  color: #FFFFFF;
  font-size: 28px;
  text-align:center;
}

/* 弹出框内容 */
.popover-content {
  background-color: coral;
  color: #FFFFFF;
  padding: 25px;
}

/* 弹出框箭头 */
.arrow {
  border-right-color: red !important;
}
亲自试一试 »