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 相关文章推荐
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
Python实现扩展内置类型的方法分析
2017/10/16 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
春季运动会广播稿大全
2014/02/19 职场文书
学生干部培训方案
2014/06/12 职场文书
班级文化标语
2014/06/23 职场文书
材料物理专业求职信
2014/09/01 职场文书
红高粱观后感
2015/06/10 职场文书
校园安全主题班会
2015/08/12 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
小学思想品德教学反思
2016/02/24 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS