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

网上搜了下 看到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. 关于oracle的基础增删改查操作总结
  2. ue4商城素材 Cyberpunk City / Recife Environment 赛博朋克城市场景
  3. Linux上oracle的安装
  4. 005_Spring的属性注入
  5. httpsendrequest的head怎么用string写_商品广告语用怎么写?男人篇
  6. java date sql和_Java.util.date 与 java.sql.date区别和转换
  7. SSHF备忘之依赖包(struts2+spring2.5+hibernate+freemarker)
  8. 百度面试测试开发工程师内容
  9. powerbi实时刷新mysql数据库_PowerBI开发 第七篇:数据集和数据刷新
  10. PNG,GIF,JPG的区别及如何选
  11. Android系统架构图
  12. vfp保存为html,建立,生成,运行VFP菜单
  13. pom文件中配置阿里远程仓库
  14. 黑月教主工具脱水印_PS三种去水印方法简单粗暴!看完你就学会!
  15. 层次包围盒和均匀网格
  16. 虚拟盒子下装linux系统,eUnoBox(虚拟盒子) v3.14免费版
  17. 【t006】三角形分形描绘问题
  18. ewiews面板回归模型操作_EViews操作指南:eviews面板数据回归分析
  19. 培养数字化人才 护航大学生就业 千锋教研院2022年教研战略发布会隆重举行
  20. LaTex(PART X)数学公式的6种定义形式

热门文章

  1. 干货|读完这篇,再也不担心基金从业考试!
  2. jtf_rs_defresources_srp_v引起的问题 同义词无数据 基表有数据
  3. 微信小程序微信支付(统一支付)
  4. 硬件只要一块esp8266 nodemcu板+几根杜邦线实现远程PC开机,软件全开源(替代智能开关)
  5. Houdini17 OptiX Denoise使用
  6. Python中格式化操作漂亮打印文件的读取和写入
  7. git初次上传代码到远程仓库,输入用户名密码,提示鉴权失败
  8. git clone提示鉴权失败
  9. [译] APT分析报告:02.钓鱼邮件网址混淆URL逃避检测
  10. 2003- cant connect to MYSQL server on localhost(10061)