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 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
JSON 数据格式详解
Sep 13 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 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
新浪新闻小偷
2006/10/09 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
python字符串对其居中显示的方法
2015/07/11 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python pip 常用命令汇总
2020/10/19 Python
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
企业统计员岗位职责
2013/12/13 职场文书
护士思想汇报
2014/01/12 职场文书
对祖国的寄语大全
2014/04/11 职场文书
献爱心倡议书
2014/04/14 职场文书
班级活动总结格式
2014/08/30 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
2014年库房工作总结
2014/11/26 职场文书
2015年暑假生活总结
2015/07/13 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
php 原生分页
2021/04/01 PHP