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 相关文章推荐
jQuery chili图片远处放大插件
Nov 30 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
PHP实现货币换算的方法
2014/11/29 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
深入分析PHP设计模式
2020/06/15 PHP
JavaScript Prototype对象
2009/01/07 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
python实现人民币大写转换
2018/06/20 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
python实现简单坦克大战
2020/03/27 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
小学教师管理制度
2014/01/18 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
毕业生找工作求职信
2014/08/05 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
php字符串倒叙
2021/04/01 PHP
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS