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 相关文章推荐
深入理解JSON数据源格式
Jan 10 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
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实现通过URL提取根域名
2016/03/31 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
详解jquery和vue对比
2019/04/16 jQuery
小程序双头slider选择器的实现示例
2020/03/31 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
小学体育教学反思
2014/01/31 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
公证委托书模板
2014/04/03 职场文书
新闻发布会策划方案
2014/06/12 职场文书
保护地球的标语
2014/06/17 职场文书
森林防火宣传标语
2014/06/27 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
Python基础之Socket通信原理
2021/04/22 Python
Nginx源码编译安装过程记录
2021/11/17 Servers