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实现简单的ajax
Jul 08 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
javascript闭包的理解
Apr 01 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
js浏览器html5表单验证
Oct 17 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 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
PHP开发中四种查询返回结果分析
2011/01/02 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
市级三好学生评语
2014/12/29 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang