Bootstrap JS 弹出框
JS 弹出框 (popover.js)
弹出框插件类似于工具提示;它是一个弹出框,当用户点击一个元素时出现。不同之处在于弹出框可以包含更多内容。
插件依赖:弹出框需要您的 Bootstrap 版本中包含工具提示插件 (tooltip.js)。
有关弹出框的教程,请阅读我们的Bootstrap 弹出框教程。
通过 data-* 属性
data-toggle="popover"
激活弹出框。
title
属性指定弹出框的标题文本。
data-content
属性指定应在弹出框正文中显示的文本。
通过 JavaScript
弹出框不是纯 CSS 插件,因此必须使用 jQuery 初始化:选择指定的元素并调用 popover()
方法。
示例
// 选择文档中所有 data-toggle="popover" 的元素
$('[data-toggle="popover"]').popover();
// 选择指定元素
$('#myPopover').popover();
自己动手试一试 »
弹出框选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性,将选项名称附加到 data-,例如 data-placement=""。
名称 | 类型 | 默认值 | 描述 | 试一试 |
---|---|---|---|---|
animation | boolean | true |
指定在打开和关闭弹出框时是否添加 CSS 淡入淡出过渡效果
|
试一试 |
container | 字符串,或布尔值 false | false | 将弹出框附加到特定元素。 示例:container: 'body' |
试一试 |
content | string | "" | 指定弹出框正文中的文本 | 试一试 |
delay | 数字,或对象 | 0 | 指定打开和关闭弹出框所需的毫秒数。 要分别为打开和关闭指定延迟,请使用对象结构 delay: {show: 500, hide: 100} - 这将需要 500 毫秒打开弹出框,但只需 100 毫秒关闭它 |
试一试 |
html | boolean | false | 指定是否在弹出框中接受 HTML 标签
当设置为 false(默认)时,将使用 jQuery 的 text() 方法。如果您担心 XSS 攻击,请使用此选项 |
试一试 |
placement | string | "right" | 指定弹出框位置。可能的值
|
试一试 |
selector | 字符串,或布尔值 false | false | 将弹出框添加到指定的选择器 | 试一试 |
template | string | 创建弹出框时使用的基本 HTML。 弹出框的标题将被注入到 .popover-title 中。 弹出框的内容将被注入到 .popover-content 中。 .arrow 将成为弹出框的箭头。 最外层包装元素应具有 .popover 类。 |
||
title | string | "" | 指定弹出框的标题文本 | 试一试 |
trigger | string | "click" | 指定弹出框的触发方式。可能的值
|
试一试 |
viewport | 字符串或对象 | {selector: "body", padding: 0} | 将弹出框保持在此元素的边界内。 示例:viewport: '#viewport' 或 {selector: '#viewport', padding: 0} |
弹出框方法
下表列出了所有可用的弹出框方法。
方法 | 描述 | 试一试 |
---|---|---|
.popover(选项) | 使用选项激活弹出框。有关有效值,请参阅上面的选项 | 试一试 |
.popover("show") | 显示弹出框 | 试一试 |
.popover("hide") | 隐藏弹出框 | 试一试 |
.popover("toggle") | 切换弹出框 | 试一试 |
.popover("destroy") | 隐藏并销毁弹出框 | 试一试 |
弹出框事件
下表列出了所有可用的弹出框事件。
事件 | 描述 | 试一试 |
---|---|---|
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;
}
自己动手试一试 »