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-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
django框架创建应用操作示例
2019/09/26 Python
python 模块导入问题汇总
2021/02/01 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
美国鲜花递送:UrbanStems
2021/01/04 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
小学毕业感言300字
2014/02/19 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
物资采购方案
2014/06/12 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
2015年电工工作总结
2015/04/10 职场文书
会计实训总结范文
2015/08/03 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis