Bootstrap 弹出框（Popover）插件

最新推荐文章于 2024-04-18 09:43:05 发布
置顶 最新推荐文章于 2024-04-18 09:43:05 发布
阅读量3.3k 收藏 1
点赞数 1
分类专栏： Bootstrap 文章标签： bootstrap jquery web应用 插件 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lluohuih/article/details/43702783
版权

Bootstrap 弹出框（Popover）插件

弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。

如果您想要单独引用该插件的功能，那么您需要引用 popover.js，它依赖于 工具提示（Tooltip）插件。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。您可以有以下两种方式添加弹出框（popover）：

  • 通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。
    1
    2
    3
    < a  href = "#"  data-toggle = "popover"  title = "Example popover" >
        请悬停在我的上面
    </ a >
  • 通过 JavaScript：通过 JavaScript 启用弹出框（popover）：
    1
    $('#identifier').popover(options)

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

1
$(function () { $("[data-toggle='popover']").popover(); });

实例

下面的实例演示了通过 data 属性使用弹出框（Popover）插件的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
< html >
< head >
    < title >Bootstrap 实例 - 弹出框（Popover）插件</ title >
    < link  href = "/bootstrap/css/bootstrap.min.css"  rel = "stylesheet" >
    < script  src = "/scripts/jquery.min.js" ></ script >
    < script  src = "/bootstrap/js/bootstrap.min.js" ></ script >
</ head >
< body >
 
< div  class = "container"  style = "padding: 100px 50px 10px;"  >
    < button  type = "button"  class = "btn btn-default"  title = "Popover title" 
       data-container = "body"  data-toggle = "popover"  data-placement = "left"
       data-content = "左侧的 Popover 中的一些内容" >
       左侧的 Popover
    </ button >
    < button  type = "button"  class = "btn btn-primary"  title = "Popover title" 
       data-container = "body"  data-toggle = "popover"  data-placement = "top"
       data-content = "顶部的 Popover 中的一些内容" >
       顶部的 Popover
    </ button >
    < button  type = "button"  class = "btn btn-success"  title = "Popover title" 
       data-container = "body"  data-toggle = "popover"  data-placement = "bottom"
       data-content = "底部的 Popover 中的一些内容" >
       底部的 Popover
    </ button >
    < button  type = "button"  class = "btn btn-warning"  title = "Popover title" 
       data-container = "body"  data-toggle = "popover"  data-placement = "right"
       data-content = "右侧的 Popover 中的一些内容" >
       右侧的 Popover
    </ button >
    </ div >
 
    < script >$(function ()
       { $("[data-toggle='popover']").popover();
       });
    </ script >
</ div >
 
</ body >
</ html >
 

结果如下所示：

弹出框（Popover）插件

选项

有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。下表列出了这些选项：

选项名称 类型/默认值 Data 属性名称 描述
animation boolean
默认值：true		 data-animation 向弹出框应用 CSS 褪色过渡效果。
html boolean
默认值：false		 data-html 向弹出框插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement string|function
默认值：top		 data-placement 规定如何定位弹出框（即 top|bottom|left|right|auto）。
当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector string
默认值：false		 data-selector 如果提供了一个选择器，弹出框对象将被委派到指定的目标。
title string | function
默认值：''		 data-title 如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger string
默认值：'hover focus'		 data-trigger 定义如何触发弹出框： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。
delay number | object
默认值：0		 data-delay 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：
1
2
delay:
{ show: 500, hide: 100 }
container string | false
默认值：false		 data-container 向指定元素追加弹出框。
实例： container: 'body'

方法

下面是一些弹出框（Popover）插件中有用的方法：

方法 描述 实例
Options:.popover(options) 向元素集合附加弹出框句柄。
1
$().popover(options)
Toggle:.popover('toggle') 切换显示/隐藏元素的弹出框。
1
$('#element').popover('toggle')
Show:.popover('show') 显示元素的弹出框。
1
$('#element').popover('show')
Hide:.popover('hide') 隐藏元素的弹出框。
1
$('#element').popover('hide')
Destroy:.popover('destroy') 隐藏并销毁元素的弹出框。
1
$('#element').popover('destroy')

实例

下面的实例演示了弹出框（Popover）插件的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
< html >
< head >
    < title >Bootstrap 实例 - 弹出框（Popover）插件方法</ title >
    < link  href = "/bootstrap/css/bootstrap.min.css"  rel = "stylesheet" >
    < script  src = "/scripts/jquery.min.js" ></ script >
    < script  src = "/bootstrap/js/bootstrap.min.js" ></ script >
</ head >
< body >
 
< div  class = "container"  style = "padding: 100px 50px 10px;"  >
    < button  type = "button"  class = "btn btn-default popover-show"
       title = "Popover title"  data-container = "body"
       data-toggle = "popover"  data-placement = "left"
       data-content = "左侧的 Popover 中的一些内容 —— show 方法" >
       左侧的 Popover
    </ button >
    < button  type = "button"  class = "btn btn-primary popover-hide"
       title = "Popover title"  data-container = "body"
       data-toggle = "popover"  data-placement = "top"
       data-content = "顶部的 Popover 中的一些内容 —— hide 方法" >
       顶部的 Popover
    </ button >
    < button  type = "button"  class = "btn btn-success popover-destroy"
       title = "Popover title"  data-container = "body"
       data-toggle = "popover"  data-placement = "bottom"
       data-content = "底部的 Popover 中的一些内容 —— destroy 方法" >
       底部的 Popover
    </ button >
    < button  type = "button"  class = "btn btn-warning popover-toggle"
       title = "Popover title"  data-container = "body"
       data-toggle = "popover"  data-placement = "right"
       data-content = "右侧的 Popover 中的一些内容 —— toggle 方法" >
       右侧的 Popover
    </ button >< br >< br >< br >< br >< br >< br >
    < p  class = "popover-options" >
       < a  href = "#"  type = "button"  class = "btn btn-warning"  title="<h2>Title</ h2 >" 
          data-container="body" data-toggle="popover" data-content="
          < h4 >Popover 中的一些内容 —— options 方法</ h4 >">
          Popover
       </ a >
    </ p >
    < script >
       $(function () { $('.popover-show').popover('show');});
       $(function () { $('.popover-hide').popover('hide');});
       $(function () { $('.popover-destroy').popover('destroy');});
       $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
    </ script >
</ div >
 
</ body >
</ html >

结果如下所示：

弹出框（Popover）插件方法

事件

下表列出了弹出框（Popover）插件中要用到的事件。这些事件可在函数中当钩子使用。

事件 描述 实例
show.bs.popover 当调用 show 实例方法时立即触发该事件。
1
2
3
$('#mypopover').on('show.bs.popover', function () {
   // 执行一些动作...
})
shown.bs.popover 当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。
1
2
3
$('#mypopover').on('shown.bs.popover', function () {
   // 执行一些动作...
})
hide.bs.popover 当调用 hide 实例方法时立即触发该事件。
1
2
3
$('#mypopover').on('hide.bs.popover', function () {
   // 执行一些动作...
})
hidden.bs.popover 当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。
1
2
3
$('#mypopover').on('hidden.bs.popover', function () {
   // 执行一些动作...
})

实例

下面的实例演示了弹出框（Popover）插件的事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
< html >
< head >
    < title >Bootstrap 实例 - 弹出框（Popover）插件事件</ title >
    < link  href = "/bootstrap/css/bootstrap.min.css"  rel = "stylesheet" >
    < script  src = "/scripts/jquery.min.js" ></ script >
    < script  src = "/bootstrap/js/bootstrap.min.js" ></ script >
</ head >
< body >
 
< div  clas = "container"  style = "padding: 100px 50px 10px;"  >
    < button  type = "button"  class = "btn btn-primary popover-show"
       title = "Popover title"  data-container = "body"
       data-toggle = "popover"
       data-content = "左侧的 Popover 中的一些内容 —— show 方法" >
       左侧的 Popover
    </ button >
 
    </ div >
    < script >
       $(function () { $('.popover-show').popover('show');});
       $(function () { $('.popover-show').on('shown.bs.popover', function () {
       alert("当显示时警告消息");
    })});
    </ script >
</ div >
 
</ body >
</ html >

结果如下所示：

弹出框（Popover）插件事件


还有不懂的，可以加QQ群详细讨论，群号： 247466735
lluohuih
关注
专栏目录
bootstrap 实现弹出框popover，动态改变popover内容
roodyszz2013的博客
12-23 2万+
目的：点击一个链接/按钮，后台取出数据，popover显示取出的内容 1.设置链接： 查看结论 2.设置showConclusion2方法： function showConclusion2(item){ $("#conclusionShow").popover().click(function() { $("#content").text('YOU
eModal基于BootStrap的弹框插件
07-04
演示地址 http://www.ui3g.com/demos/show/1590/ 里面使用实例
学习使用Bootstrap弹出框Popover插件事件实例
徊忆羽菲
09-07 307
学习使用Bootstrap弹出框Popover插件事件实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 弹出框（Popover）插件事件</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css
popover插件使用
sayoko06的博客
11-27 1068
贴上代码，回顾用，第一段js是实现点击弹出框其他地方弹出框隐藏的js。 提供官方popover API链接http://getbootstrap.com/docs/4.0/components/popovers/ //点击popover其他地方，就隐藏弹出框 $('body').click(function (event) { var target = $(event.target)...
Bootstrap 弹出提示插件Popover 的选项
歪脖先生的博客
03-14 1910
选项Bootstrap为工具提示插件提供了 8 个选项，所有的选项都可以通过 data 属性或JavaScript进行设置。见表 5‑5：表 5‑5 popover插件的选项名称类型默认值说明animationbooleantrue为弹出提示应用CSS淡入淡出过渡效果htmlbooleanfalse提示条支持插入 HTML。如果取值为 false，则使用 jQuery 的 text 方法插入文本。...
Bootstrap系列之弹出框（Popovers）
热门推荐
老__L的博客
06-19 1万+
使用弹窗插件时要知道的事情弹出框依赖于第三方库Popper进行定位。你必须在之前包含或使用/，其中包含Popper以便弹出框工作；弹出框需要tooltip插件作为依赖项；如果您从源代码构建我们的JavaScript，它需要util.js；由于性能原因，弹窗是可选择的，所以您必须自己初始化它们；零长度的标题和内容值将永远不会显示弹出框；指定以避免在更复杂的组件(如输入组、按钮组等)中呈现问题；在隐藏元素上触发弹窗将不起作用；.disabled或disabled。
Bootstrap每天必学之弹出框（Popover）插件
01-21
Bootstrap弹出框插件，提供了一个扩展的视图，弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。 弹出框（Popover）与工具提示（Tooltip）类似，提供了一个...
bootstrap 点击空白处popover弹出框隐藏实例
08-28
Bootstrap 点击空白处Popover弹出框隐藏实例 ...本篇文章提供了一个基本的Bootstrap 点击空白处Popover弹出框隐藏实例，展示了Popover的基本用法、事件、手动触发、容器、取消冒泡和隐藏等知识点。
jQuery+bootstrap提示框插件Popover
06-10
Bootstrap的Popover插件是其UI组件之一，提供了一种优雅的方式来展示额外的详细信息，通常用在按钮、链接或其他元素上，当用户执行特定操作（如悬停或点击）时，这些信息会以弹出框的形式出现。 Popover的使用通常...
bootstrap popover
01-17
bootstrap popover实现鼠标经过显示并保持显示框。
Bootstrap弹出框
07-18
Bootstrap弹出框
bootstrap之popover
xixi
10-30 586
一、前言这节介绍下popover(弹出框)模块的源码实现。二、源码1、popovers.less // // Popovers(弹出框) // -------------------------------------------------- .popover { position: absolute; top: 0; left: 0; z-index: @zinde
Bootstrap popover弹出框
weixin_34099526的博客
07-17 182
popover被挤压、遮挡的问题： 　　弹出框显示的时候如果贴近一个列的边沿，就会很窄或被遮挡，解决起来很简单，只需在初始化的时候添加一个container属性就可以了： $(function (){ 　　$("[data-toggle='popover']").popover({ 　　　　trigger: 'hover', 　　　　container: 'body' 　　}); }); 用法...
a按钮居中显示 bootstrap_Bootstrap的popover提示框样式
weixin_28882103的博客
12-29 467
使用popover提示框插件时需要注意的事项：popover提示框组件依赖 Popper.js 进行定位，在必须引入 popper.min.js 在bootstrap.js脚本之前，或者使用bootstrap.bundle.min.js / bootstrap.bundle.js（这两个脚本中已经包含了Popper.js可以直接运行弹出提示框）。popover提示框组件依赖于 tooltips提示...
推荐一款神器：Vue.js Popover - 优雅的弹出框解决方案
最新发布
gitblog_00006的博客
04-18 576
推荐一款神器：Vue.js Popover - 优雅的弹出框解决方案 vue-js-popover:dango: Vue.js 2 library for dropdowns / popovers / tooltips项目地址:https://gitcode.com/gh_mirrors/vu/vue-js-popover 在Web开发中，弹出框是常见的交互元素，用于显示额外信息或者提供操作选项...
bootstrap弹出框popover
技术改变生活
03-09 1256
今天学习了bootstrap弹出框的功能可以消失的弹出框 1.引用bootstrap的js和css然后开始写代码 解读：id来取dom点。 tabindex="0" role="button" role和a标签来适应各个浏览器。 data-trigger="focus"控制可以隐藏. data-placement="bottom" left.right top控制方向。 操作 2.jq
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值