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淡入淡出效果
|
测试一下 |
| 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 标记:
设置为 false（默认）时，将使用 jQuery 的 text() 方法。如果您担心 XSS 攻击，请使用此选项 |
测试一下 |
| placement | string | "right" | 指定弹出框位置。可能的值:
|
测试一下 |
| selector | string, or the boolean false | false | 将弹出框添加到指定的选择器 | 测试一下 |
| template | string | 创建弹出框时要使用的基本 HTML。 弹出框的标题将被注入到 .popover-title 中。 弹出框的内容将被注入到 .popover-content 中。 ..arrow 将成为弹出框的箭头。 最外层的包装元素应该有 .popover 类。 |
||
| title | string | "" | 指定弹出框的标题文本 | 测试一下 |
| trigger | string | "click" | 指定如何触发弹出框。可能的值:
|
测试一下 |
| 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;
}
亲自试一试 »
