菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap JS 弹出框


JS 弹出框 (popover.js)

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

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

有关弹出框的教程,请阅读我们的Bootstrap 弹出框教程


通过 data-* 属性

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

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

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

示例

<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框中的一些内容">切换弹出框</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" - 获得焦点时触发弹出框(例如通过 Tab 键或点击)
  • "manual" - 手动触发弹出框
提示:要传递多个值,请用空格分隔
试一试
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;
}
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持