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 相关文章推荐
javascript 页面只自动刷新一次
Jul 10 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
js实现返回顶部效果
Mar 10 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
Javascript获取某个月的天数
May 30 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
了解javascript中的Dom操作
May 27 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
详解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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php实现的双向队列类实例
2014/09/24 PHP
PHP比你想象的好得多
2014/11/27 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python自动发邮件脚本
2017/03/31 Python
Python星号*与**用法分析
2018/02/02 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
Python类反射机制使用实例解析
2019/12/30 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
python利用opencv实现颜色检测
2021/02/23 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
幼儿园小班评语大全
2014/04/17 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
好好学习保证书
2015/02/26 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
写给老师的保证书
2015/05/09 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL