Bootstrap插件（五）——弹出框（popover.js）

最新推荐文章于 2024-02-05 02:38:00 发布
最新推荐文章于 2024-02-05 02:38:00 发布
阅读量3.6k 收藏
点赞数
分类专栏： front-end(bootstrap) 文章标签： bootstrap 插件 popover 弹出框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28057577/article/details/78023883
版权
其实popover.js插件和tooltip.js类似，都有附加说明的作用，而popover比起tooltip显示的提示内容更多一些，我们还是通过一个简单的代码示例对popover进行学习。
示例效果图如下：

示例代码：

1 
<!DOCTYPE html>
2 
<html>
3 
<head lang="en">
4 
    <meta charset="UTF-8">
5 
    <title>组件</title>
6 
    <!--引入bootstrap样式文件-->
7 
    <link href="css/bootstrap.min.css" rel="stylesheet">
8 
    <!--引入jq（必须在bootstrap.min.js文件之前）-->
9 
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10 
    <!--引入bootstrap js-->
11 
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
12 
    
13 
    <script>
14 
​
15 
        $(function () {
16 
            $('[data-toggle="popover"]').popover()
17 
        })
18 
    </script>
19 
</head>
20 
<body style="margin: 150px">
21 
​
22 
    <!--
23 
      1. 设置 data-toggle="popover"
24 
      2. title=""设置标题
25 
      3. data-content="看我漂不漂亮"设置弹出框内容
26 
      4. data-placement="left"设置显示方向
27 
      5. data-trigger="focus"设置可点击外部取消
28 
      6.data-container="body"设置在文档flow中归属的元素
29 
      7.data-animation设置是否有点入淡出效果
30 
      8.js设置$('[data-toggle="popover"]').popover()
31 
    -->
32 
    <div class="popover-cont">
33 
        <h5>带标题的弹出框</h5><hr/>
34 
        <button type="button" class="btn btn-warning" data-toggle="popover" title="看我"
35 
                data-content="看我漂不漂亮">显示/隐藏弹框</button>
36 
    </div>
37 
    <div class="popover-cont1">
38 
        <h5>弹出框方向</h5><hr/>
39 
        <button type="button" data-animation="false" data-container="body" class="btn btn-info" data-content="left popover" data-toggle="popover"
40 
                data-placement="left">left popover</button>
41 
        <button type="button" data-container="body" class="btn btn-warning" data-content="top popover" data-toggle="popover"
42 
                data-placement="top">top popover</button>
43 
        <button type="button" data-container="body" class="btn btn-success" data-content="right popover" data-toggle="popover"
44 
                data-placement="right">right popover</button>
45 
        <button type="button" data-container="body" class="btn btn-primary" data-content="bottom popover" data-toggle="popover"
46 
                data-placement="bottom">bottom popover</button>
47 
    </div>
48 
​
49 
    <div class="popover-cont2">
50 
        <h5>点击外部可取消弹出框</h5><hr/>
51 
        <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-content="点击外部可取消"
52 
                data-placement="right" data-trigger="focus" >点击外部可取消</button>
53 
    </div>
54 
</body>
55 
</html>
56 
​
 
小巷下起了雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 弹出框（Popover）插件
12-14
Bootstrap 弹出框（Popover）插件 弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap ...
a按钮居中显示 bootstrap_Bootstrap的popover提示框样式
weixin_28882103的博客
12-29 419
使用popover提示框插件时需要注意的事项：popover提示框组件依赖 Popper.js 进行定位，在必须引入 popper.min.js 在bootstrap.js脚本之前，或者使用bootstrap.bundle.min.js / bootstrap.bundle.js（这两个脚本中已经包含了Popper.js可以直接运行弹出提示框）。popover提示框组件依赖于 tooltips提示...
bootstrap3自定义popover显示的内容
sunshine
07-02 1万+
1、popover.js的内容一般都是写元素里面。如下。 点我弹出/隐藏弹出框 其中title为显示的标题，data-content为显示的内容 2、popover不会自己初始化，所以在页面中需要用js进行初始化 $(function () {  $('[data-toggle="popover"]').popover() }) 3、可以通过js调用，自定
BootStrap学习笔记JS插件（一）--模态弹出框
最新发布
男神的专栏
02-05 599
2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。，一般使用“modal-header”表示，主要包括标题和关闭按钮。，一般使用“modal-footer”表示，主要放置操作按钮。.modal-lg 为大弹出框；试验在触发按钮或弹出modal上设置，发现都可以使用。，一般使用“modal-body”表示，弹出框的主要内容。
Element分析（工具篇）帮助我们定位元素 => Popper.js
余光的博客
07-17 6430
说明 popper是参考popper.js来实现浮动的工具，结构十分清晰明了，通过modifiers来处理数据的思路在vue中也有相应的体现，因此值得学习，源码较长，建议大家复制到自己的 IDE 中观看。 源码解读 /** * 模块处理，支持：Node，AMD，浏览器全局变量 * root 指代全局变量 * factory 指代下面的 Popper */ ;(function (root,...
【Bootstrap】——popover效果弹出框
热门推荐
王萌萌
09-22 2万+
Popover提供了一个扩展的视图。小编使用到了Popover的两种效果：      第一种：将鼠标移入所添加效果的元素，出现Popover视图，移出元素视图隐藏；      第二种：单击添加效果元素，展现Popover视图，再次单击隐藏视图。     首先，如果要引用该插件，需要引用popover.js，它依赖于工具提示插件，大家可以直接引用bootstrap.js 或bootstrap.
Bootstrap3 弹出提示插件的使用方法
歪脖先生的博客
05-30 1425
弹出提示 弹出提示（popover.js）是工具提示的子类，它比工具提示多了一个 content 参数，是工具提示插件的拓展。 弹出框依赖于工具提示插件tooltip.js，如果你定制了 Bootstrap，就一定要将依赖的插件编译进去。 使用方法 你可以给任何元素添加弹出提示，并通过 title 属性定义提示的标题，通过 data-content 属性定义提示的内容。如： &...
Jquery两个插件的搭配使用： Select2 和 popover验证
ppxin的专栏
06-04 402
1、使用的插件： (1)select2-3.5.2/select2.min.js (2) jquery.validate.bootstrap.popover.js、jquery.validate.min.js 2、应用环境 首先看一下设计需求（见下图）： 页面中“Select one or more branch”处可以多选，使用的是select2插件，这里真正的select...
Bootstrap弹出框(popover)中插入图片
gyueh的博客
12-06 4137
目的：鼠标滑过按钮时，按钮底部出现相应的图片弹出框。 效果图如下： html部分代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=d...
jq实现鼠标放置名字上显示详细内容的气泡效果
小花同学的成长之路
03-17 2184
实现效果如上图，当鼠标放置到名字上时，则显示出内容详情。 实现具体过程如下： 1、需要加这句js $(function () { $('[data-toggle="popover"]').popover() }); 2、html代码如下： 变量名称 这样就可以实现气泡效果了，还是挺有意思的一个小效果。
Popover.js
qq_36443497的博客
07-05 1300
基本配置参数//常用配置参数： $(document).ready(function() { $('#temp').popover( { trigger:'click', //触发方式 template: '', //自定义模板 title:"标题",//设置 弹出框 的标题 ht
Bootstrap每天必学之弹出框（Popover）插件
01-21
Bootstrap弹出框插件，提供了一个扩展的视图，弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。 弹出框（Popover）与工具提示（Tooltip）类似，提供了一个...
Bootstrap教程JS插件弹出框学习笔记分享
10-22
主要为大家分享了Bootstrap教程JS插件弹出框学习笔记，为大家详细介绍Bootstrap弹出框的使用方法，感兴趣的小伙伴们可以参考一下
bootstrap 点击空白处popover弹出框隐藏实例
08-28
下面小编就为大家分享一篇bootstrap 点击空白处popover弹出框隐藏实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Bootstrap插件（一）——模态框（modal.js）
Andy_lau
09-07 1万+
前言：这一片文章我们将对bootstrap的modal模态框进行学习，学习他是如何绑定到一个按钮上去点击显示，学习模态框的简单数据配置，学习模态框的使用方式，事件，方法、参数等；下面是modal的内容总结。 目录：          1.模态框的大小以及动画效果禁用     2.通过button传递内容给绑定的modal     3.模态框的调
Bootstrap插件（六）——警告框（alert.js）
Andy_lau
09-18 1万+
bootstrap中的alert和原本的alert弹框可不太一样，原来我们熟悉的弹框是在执行某个动作的时候，浏览器和我们弹出来的一个提示框，比如下面这样：  而我们这里的警告框是在html内容之间的提示内容，只是他有着醒目的颜色，以此来达到提醒用户的目的，就像下面这样：  ok，不用啰嗦，alert的使用也比较简单，我还是像往常一样通过一个简单的代码示例来学习他的使用方
Bootstrap插件（八）——轮播（Carousel.js）
Andy_lau
09-26 8392
这一篇我们来学习一下bootstrap的轮播插件Carousel.js,我相信大家对于轮播已经熟悉的不能再熟悉了，基本上我们任意打开一个网站都会有轮播的元素。在以前需要我们通过js css html自己写，但是对于初学者来说还是比较难得人一件事，但是bootstrap为我们封装好了一个插件，只要简单的classl配置就能简单的实现轮播。OK接下来依然是先来看看我们的示例效果：  来看
Bootstrap插件（三）——标签页导航（tab.js）
Andy_lau
09-14 7633
之前讲组件的时候有讲到tab普通式和胶囊式标签页，但是都只是讲解一些静态的布局，并没有加入动态的交互效果，这一篇文章将根据一个代码示例来学习，标签导航与所对应内容的联动。想来看一下具体实现的动态效果：   效果就像上面，当点击tab选项的时候切换 对应的内容，下面是实现的代码:
Bootstrap插件（四）——工具提示（tooltip.js）
Andy_lau
09-15 5417
工具提示的应用场景是某些内容的辅助提示，在元素被点击或者获取焦点是提示用户。都是比较简单是使用，我依然直接用一个例子来进行学习。 依然是先看实现的效果，效果图如下：  代码实现如下： 1 DOCTYPE html> 2 html> 3
bootstrap4弹出框
05-29
使用 Bootstrap 4 弹出框的方法如下： 1. HTML 结构中，添加一个按钮，用于触发弹出框： ``` <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开弹出框</button> ``` 2. 添加一个弹出框的容器，并设置弹出框的样式： ``` <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 弹出框头部 --> <div class="modal-header"> <h4 class="modal-title">弹出框标题</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- 弹出框主体 --> <div class="modal-body"> 弹出框内容 </div> <!-- 弹出框底部 --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button> </div> </div> </div> </div> ``` 3. 引入 Bootstrap 的 JavaScript 文件： ``` <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> ``` 这样，一个基本的 Bootstrap 4 弹出框就完成了。可以通过修改弹出框容器的样式，来调整弹出框的外观和布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值