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 判断Flash是否加载完成的代码
Apr 12 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
详解javascript高级定时器
Dec 31 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
vue3种table表格选项个数的控制方法
Apr 14 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
URL Rewrite的设置方法
2007/01/02 PHP
PHP代码加密的方法总结
2020/03/13 PHP
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
Angularjs的键盘事件的绑定
2017/07/27 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
Python变量类型知识点总结
2019/02/18 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
Django stark组件使用及原理详解
2019/08/22 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
酒店人事专员岗位职责
2013/12/19 职场文书
会计专业自我鉴定范文
2013/12/29 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
吧主申请感言怎么写
2015/08/03 职场文书