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 插件 任意位置浮动固定层
Dec 25 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 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判断远程url是否有效的几种方法小结
2011/10/08 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
json跟xml的对比分析
2008/06/10 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
python3简单实现微信爬虫
2015/04/09 Python
Python实现单词拼写检查
2015/04/25 Python
Python语言进阶知识点总结
2019/05/28 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
机关门卫的岗位职责
2014/04/29 职场文书
英文邀请函
2015/02/02 职场文书
收费员岗位职责
2015/02/14 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL