BootStrap 点击展示气泡框

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

网上搜了下看到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 点击展示气泡框相关推荐

前端 element plus Popover气泡卡片中再套个气泡卡片点击第二个气泡框的时候第一个气泡框不会消失
当选中小气泡框中的多选框中前面的这个气泡框会自己消失. 因为第一个气泡框使用的是[trigger="click"] 点击除气泡框本身的内容外其余都会消失. 因为气泡框会默认[将 ...
linux视频对话框,抖音对话框视频怎么做？如何在视频画面上添加对话气泡框？视频加对话气泡的方法...
小编家里有个快要两周岁的小侄女,平日里总是喜欢做一些人小鬼大的事情,这不,前段时间她妈妈发了一个小视频,她拉着一个跟她差不多大的行李箱一脸严肃地说她要去上班~那么小一个小不点,居然很认真地对她妈妈说要 ...
小程序结合腾讯地图（QQMapWX）SDK做位置周边搜索在地图上展示气泡点，点击气泡展示不同状态
1.背景: 在微信小程序中,地图上展示一个坐标点周边的医院学校等周边设施,通过地图上气泡的方式.点击气泡展示不同的气泡状态,点击导航跳转到对应气泡点所在的坐标位置. 2.实现思路: 2.1布局: 地图 ...
uni-app二维码生成，点击按钮弹框展示二维码
uni-app二维码生成,点击按钮展示二维码文章 uni-app二维码生成,点击按钮展示二维码前言一.首先我用的是HBuilderX,新建uni-app项目二.使用步骤 1.先下载插件uQRC ...
php使用popover,php中bootstrap框架.popover弹出框，鼠标移动到上面自动显示，离开自动消失...
$(function(){//显示弹出框 $("[rel=name]").popover({ trigger:'manual', placement : 'bottom', //p ...
html表格点击为编辑框,el-table表格内双击或单击单元格编辑输入框、日期等
需求在el-table中想要直接点击单元格直接由文字显示变为编辑框状态,而非一整行编辑或者通过展示模态框编辑,这样目标性会比较清楚且页面较简洁.下面直接上代码! 实现效果 html代码 @blur= ...
小程序点击地图气泡获取气泡_气泡上的气泡
小程序点击地图气泡获取气泡 Combining two colors that are two steps apart on the Color Wheel creates a Diad Color ...
UI设计中聊天气泡框的设计技巧
聊天气泡我们很熟悉,每天都要和他打交道.早上醒来第一-件事你是不是打开微信看看.那在和朋友聊天时,你有没有这样的疑问,为什么输入文字多少不同,气泡的展示也不同?为什么发送不同比例的图片,其缩略图的展示 ...
openlayers 地图上加图标_Openlayers 定位，添加自定义图标，点击图标弹框
之前已经把地图展示出来,现在可以在地图上做相关操作. 首先定义一个位置图层,这样可以动态操作 import Feature from 'ol/Feature' import {Vector as Ve ...
纯CSS气泡框实现方法探究
气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...

BootStrap 点击展示气泡框

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

最新文章

热门文章