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 ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
Vue路由权限控制解析
Nov 09 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 如何获取二维数组中某个key的集合
2014/06/03 PHP
php中memcache 基本操作实例
2015/05/17 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
全面了解python字符串和字典
2016/07/07 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
用python绘制樱花树
2020/10/09 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
保险专业大专生求职信
2013/10/26 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
怎么写自荐书范文
2014/02/12 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
团组织关系介绍信
2019/06/24 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
python学习之panda数据分析核心支持库
2021/05/07 Python