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 相关文章推荐
直接生成打开窗口代码,不必下载
May 14 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
vue 中使用 watch 出现了如下的报错的原因分析
May 21 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连接mssql:pdo odbc sql server
2011/07/20 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
js实现车辆管理系统
2020/08/26 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
python和C语言混合编程实例
2014/06/04 Python
Python3基础之基本数据类型概述
2014/08/13 Python
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python中bytes和str类型的区别
2019/10/21 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
高中军训第一天感言
2014/03/06 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
出国留学单位推荐信
2015/03/26 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android