bootstrap 点击空白处popover弹出框隐藏实例


Posted in Javascript onJanuary 24, 2018

代码:

<div>
 <a class="btn btn-success show" title="Popover title"
   data-container="body" data-toggle="popover" data-placement="bottom"
   data-content="底部的 Popover 中的一些内容"> aaaa </a>
</div>
<script>
 $(function () {
  initPopover();
 })
 function initPopover() {
  $(".show").popover({
   container: "body",
   trigger: " manual" //手动触发
  }).on('show.bs.popover', function () {
   $(this).addClass("popover_open");
  }).on('hide.bs.popover', function () {
   $(this).removeClass("popover_open");
  });
  $(".show").click(function () {
   if ($(this).hasClass("popover_open")) {
    $(this).popover("hide")
   } else {
    $(".popover_open").popover("hide");
    $(this).popover("show");
   }
   var e = arguments.callee.caller.arguments[0] || event;
   e.stopPropagation();
  });
  $(document).click(function () {
   $(".show").popover("hide");
  });
 }
</script>

注意点:

1、不适用于button,a、img等可用

2、show.bs.popover:当调用show 实例方法时立即触发该事件。

shown.bs.popover:当弹出框对完全弹出时触发该事件(将等待 CSS 过渡效果完成)。
hide.bs.popover:当调用hide 实例方法时立即触发该事件。
hidden.bs.popover:当工具提示完全隐藏时触发该事件(将等待 CSS 过渡效果完成)。

3、引入jquery和bootstrap头文件

4、取消冒泡

以上这篇bootstrap 点击空白处popover弹出框隐藏实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
详解node child_process模块学习笔记
Jan 24 #Javascript
浅谈Node.js 子进程与应用场景
Jan 24 #Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 #Javascript
深入理解node.js http模块
Jan 24 #Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 #Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 #Javascript
Angular整合zTree的示例代码
Jan 24 #Javascript
You might like
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
ES6新增的数组知识实例小结
2020/05/23 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
C有"按引用传递"吗
2016/09/06 面试题
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
财务总监岗位职责
2015/02/03 职场文书
话题作文之呼唤
2019/12/18 职场文书
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers