最近碰到一个需求 要求点击时浮现气泡框来展示文本内容  理想中的效果如下

网上搜了下 看到bootstrap有现成popover 插件用来实现这个的 ,现成的轮子不用白不用  引入bootstrap 的css和js  就可以开始了

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

引入头文件后,在需要点击的地方写上一些内置的属性,笔者这里因为业务要求 所以用的是a标签

<a type="button"  title=""  data-container="body"   data-toggle="popover" data-placement="left"  data-content="气泡的内容" }">查看详情</a>

简单说下 一些属性,title的内容会伴随内容一起浮现标题,一般是缺省的, data-container="body"   data-toggle="popover" 为固定写法, data-placement="left" 为向左方向展示气泡弹框,可以根据自己需求 改为 bottom 、top、right等不同的方向,data-content="气泡的内容"  就是点击标签后 气泡弹框浮现的文字内容。

接下来就是初始化需要在script标签内加上,不然点击是不会出现效果的。

$(function () {

$("[data-toggle='popover']").popover();

});

现在不出意外的话 点击a标签就已经能够浮现内容了,但是还有个小问题,点击a标签浮现的气泡框,需要再次点击气泡框才会消失,这样比较麻烦,不太符合实际需求,所以需要再加上点击父元素 body时 让已经出现的气泡框隐藏起来,因此再次在上面的基础上添加js代码来解决这种情况

$(function () { 
    $("[data-toggle='popover']").popover();
    
    $('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
  });
  
   $('body').on('hidden.bs.popover', function (e) {
        $(e.target).data("bs.popover").inState.click = false;
    });
});

到这一步 就大功告成了,感兴趣的可以去试一试。

附上最终实现截图:

官方参考用例:

https://www.runoob.com/try/try.php?filename=bootstrap3-plugin-popover

BootStrap 点击展示气泡框相关推荐

  1. 前端 element plus Popover气泡卡片 中再套个气泡卡片 点击第二个气泡框的时候第一个气泡框不会消失

    当选中小气泡框中的多选框中 前面的这个气泡框会自己消失. 因为第一个气泡框使用的是[trigger="click"] 点击除气泡框本身的内容外其余都会消失. 因为气泡框会默认[将 ...

  2. linux视频对话框,抖音对话框视频怎么做?如何在视频画面上添加对话气泡框?视频加对话气泡的方法...

    小编家里有个快要两周岁的小侄女,平日里总是喜欢做一些人小鬼大的事情,这不,前段时间她妈妈发了一个小视频,她拉着一个跟她差不多大的行李箱一脸严肃地说她要去上班~那么小一个小不点,居然很认真地对她妈妈说要 ...

  3. 小程序结合腾讯地图(QQMapWX)SDK做位置周边搜索在地图上展示气泡点,点击气泡展示不同状态

    1.背景: 在微信小程序中,地图上展示一个坐标点周边的医院学校等周边设施,通过地图上气泡的方式.点击气泡展示不同的气泡状态,点击导航跳转到对应气泡点所在的坐标位置. 2.实现思路: 2.1布局: 地图 ...

  4. uni-app二维码生成,点击按钮弹框展示二维码

    uni-app二维码生成,点击按钮展示二维码 文章 uni-app二维码生成,点击按钮展示二维码 前言 一.首先我用的是HBuilderX,新建uni-app项目 二.使用步骤 1.先下载插件uQRC ...

  5. php使用popover,php中bootstrap框架.popover弹出框,鼠标移动到上面自动显示,离开自动消失...

    $(function(){//显示弹出框 $("[rel=name]").popover({ trigger:'manual', placement : 'bottom', //p ...

  6. html表格点击为编辑框,el-table表格内双击或单击单元格编辑输入框、日期等

    需求 在el-table中想要直接点击单元格直接由文字显示变为编辑框状态,而非一整行编辑或者通过展示模态框编辑,这样目标性会比较清楚且页面较简洁.下面直接上代码! 实现效果 html代码 @blur= ...

  7. 小程序点击地图气泡获取气泡_气泡上的气泡

    小程序点击地图气泡获取气泡 Combining two colors that are two steps apart on the Color Wheel creates a Diad Color ...

  8. UI设计中聊天气泡框的设计技巧

    聊天气泡我们很熟悉,每天都要和他打交道.早上醒来第一-件事你是不是打开微信看看.那在和朋友聊天时,你有没有这样的疑问,为什么输入文字多少不同,气泡的展示也不同?为什么发送不同比例的图片,其缩略图的展示 ...

  9. openlayers 地图上加图标_Openlayers 定位,添加自定义图标,点击图标弹框

    之前已经把地图展示出来,现在可以在地图上做相关操作. 首先定义一个位置图层,这样可以动态操作 import Feature from 'ol/Feature' import {Vector as Ve ...

  10. 纯CSS气泡框实现方法探究

    气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...

最新文章

  1. 实现等待窗体的几种方式
  2. mysql压缩表语句_MYSQL静态表、动态表、压缩表总结
  3. php找不到控制器里面的方法,php – 在Laravel 4中找不到控制器类
  4. MySQL表注释和字段注释
  5. 【Flask】RESTful的响应处理
  6. 8个前沿的 HTML5 CSS3 效果【附源码下载】
  7. UOJ #586. 旅行问题
  8. 无状态mysql_既然HTTP是无状态协议,mysql_close还有必要么?
  9. Python json和simplejson的使用
  10. 互联网人在硅谷:听 Google 资深产品经理 bigjoe 聊聊职业与热爱
  11. 设计模式14——行为型模式之职责链模式
  12. [转]百度地图的一些应用方法
  13. win10电脑:。。。该内存不能为written.要终止程序,请单击确定
  14. 【组合数学】多项式定理 ( 多项式定理 | 多项式定理证明 | 多项式定理推论 1 项数是非负整数解个数 | 多项式定理推论 2 每项系数之和 )
  15. windows电脑常见问题故障解决办法
  16. Jsp中9大内建对象
  17. 什么是水货?如何辨别水货手机?水货手机能不能用?
  18. inline内联函数 static静态函数 普通函数区别
  19. Angular前端框架
  20. 使用icecast搭建在线电台并使用ffmpeg推流

热门文章

  1. 谷歌个性化地图瓦片_对Google广告个性化的调查
  2. pdfbox、icepdf工具实现pdf转图片
  3. Word中插入分隔线
  4. 都是肿瘤模型,凭什么说肿瘤类器官是“试药替身”?
  5. 永远做重要而不紧急的事
  6. PyS60记事本源码
  7. javascript回调函数有什么用
  8. DDOS攻击已然渗透互联网和物联网
  9. 19 枚举类型 Enumerated
  10. 【转载】KDiff3 Merge工具的使用 极简教程