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 相关文章推荐
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
React key值的作用和使用详解
Aug 23 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
深入浅析vue全局环境变量和模式
Apr 28 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处理postfix邮件内容的方法
2015/06/16 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
公共事业管理本科生求职信
2013/10/07 职场文书
人力资源经理自我评价
2014/01/04 职场文书
关于赌博的检讨书
2014/01/24 职场文书
生物制药专业求职信
2014/03/11 职场文书
岗位职责怎么写
2014/03/14 职场文书
2014春晚主持词
2014/03/25 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
公司文体活动总结
2015/05/07 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记