Bootstrap JS 弹出框

JS 弹出框

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

有关 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();
亲自试一试 »

弹出框选项

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

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

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

  • true - 添加淡入淡出效果
  • false - 不添加淡入淡出效果
测试一下
container 字符串,或布尔值 false false 将弹出框附加到特定元素。
示例: container: 'body'
测试一下
content string "" 指定弹出框正文中的文本 测试一下
delay 数字或对象 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 字符串,或布尔值 false false 将弹出框添加到指定的选择器 测试一下
template string   创建弹出框时要使用的基本 HTML。

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

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

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

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

  • "click" - 通过点击触发弹出框
  • "hover" - 悬停时触发弹出框
  • "focus" - 当它获得焦点时触发弹出框(通过选项卡或单击等)
  • "manual" - 手动触发弹出框
提示: 要传递多个值,请用空格分隔它们
测试一下
offset 数字或字符串 0 弹出框相对于其目标的偏移量
fallbackPlacement 字符串或数组 "flip" 指定 Popper 将在回退时使用的位置
boundary 字符串或元素 "scrollParent" 弹出框的溢出约束边界。接受值"viewport"、"window"或"scrollParent"或 HTML 元素

Popover 弹出框方法

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

方法 描述 试一试
.popover(options) 使用选项激活弹出框。请参阅上面的选项以获取有效值 测试一下
.popover("show") 显示弹出框 测试一下
.popover("hide") 隐藏弹出框 测试一下
.popover("toggle") 切换弹出框 测试一下
.popover("dispose") 隐藏和销毁弹出框 测试一下
.popover("enable") 使弹出框能够显示。这是默认的
.popover("disable") 删除显示弹出框的功能。只有再次重新启用弹出框才能显示
.popover("toggleEnabled") 切换显示或隐藏弹出框的能力
.popover("update") 更新弹出框的位置

Popover 弹出框事件

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

事件 描述 试一试
show.bs.popover 在即将显示弹出框时发生 测试一下
shown.bs.popover 在完全显示弹出框时发生(在 CSS 转换完成后) 测试一下
hide.bs.popover 在即将隐藏弹出框时发生 测试一下
hidden.bs.popover 在弹出框完全隐藏时发生(在 CSS 转换完成后) 测试一下
inserted.bs.popover 当 popover 模板添加到 DOM 时,在 show.bs.popover 事件之后发生