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 相关文章推荐
js中的replace方法使用介绍
Oct 28 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
ES6学习教程之Promise用法详解
Nov 22 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 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调用Linux命令权限不足问题解决方法
2015/02/07 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
javascript事件问题
2009/09/05 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
python关键字and和or用法实例
2015/05/28 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
python梯度下降算法的实现
2020/02/24 Python
Django用户身份验证完成示例代码
2020/04/03 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
管理站站长岗位职责
2013/11/27 职场文书
中国梦的演讲稿
2014/01/08 职场文书
微笑服务演讲稿
2014/05/13 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
人大代表选举标语
2014/10/07 职场文书
计划生育责任书
2015/05/09 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
Android Rxjava3 使用场景详解
2022/04/07 Java/Android