BootStrap自定义popover,点击区域隐藏功能的实现


Posted in Javascript onJanuary 23, 2018

当用bootstrap时,经常需要在某个地方添加帮助按钮,点击或者鼠标悬浮时,提示帮助信息,然而,bt给我们提供的方法里貌似没有,如果有哪位大神知道bootstrap有的可以留言,小弟学习了:代码如下

之前的按钮必须定义class为pop;

$(function(){
    $(".pop").popover({placement:'right', trigger:'manual', delay: {show: 10, hide: 10}, html: true,
      title: function () {
        return $("#data-original-title").html();
      },
      content: function () {
       return $("#data-content").html(); // 把content变成html
      }});
    $('body').click(function (event) {
      var target = $(event.target);    // 判断自己当前点击的内容
      if (!target.hasClass('popover')
          && !target.hasClass('pop')
          && !target.hasClass('popover-content')
          && !target.hasClass('popover-title')
          && !target.hasClass('arrow')) {
        $('.pop').popover('hide');   // 当点击body的非弹出框相关的内容的时候,关闭所有popover
      }
    });
    $(".pop").click(function (event) {
      $('.pop').popover('hide');     // 当点击一个按钮的时候把其他的所有内容先关闭。
      $(this).popover('toggle');     // 然后只把自己打开。
    });
  });

--------代码非原创,借鉴网上大神,纯粹自己学习记录而已,勿喷!

以上这篇BootStrap自定义popover,点击区域隐藏功能的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 Javascript
vuex的使用及持久化state的方式详解
Jan 23 #Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 #jQuery
js 实现复选框只能选择一项的示例代码
Jan 23 #Javascript
Vue 换肤的示例实践
Jan 23 #Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 #jQuery
Vue 拦截器对token过期处理方法
Jan 23 #Javascript
浅谈React + Webpack 构建打包优化
Jan 23 #Javascript
You might like
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
Javascript - HTML的request类
2006/07/15 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
零基础学Python(一)Python环境安装
2014/08/20 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
购买一个高级域名:BuyDomains
2018/03/11 全球购物
汽车维修专业个人求职信范文
2014/01/01 职场文书
新教师工作感言
2014/02/16 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
检讨书范文500字
2015/01/28 职场文书
JavaScript实现简单的音乐播放器
2022/08/14 Javascript