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代码必备[js多浏览器兼容写法]
Oct 29 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 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中for循环语句的几种变型
2006/11/26 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
Js+XML 操作
2006/09/20 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
Python实现基于权重的随机数2种方法
2015/04/28 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
django实现用户注册实例讲解
2019/10/30 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
汽车专业学生自我评价
2014/01/19 职场文书
电大本科自我鉴定
2014/02/05 职场文书
勾股定理课后反思
2014/04/26 职场文书
摄影展策划方案
2014/06/02 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android