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

 更新时间:2018年01月24日 11:35:20   作者:Hubert__  
下面小编就为大家分享一篇bootstrap 点击空白处popover弹出框隐藏实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

代码:

<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弹出框隐藏实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 纯css下拉菜单 无需js

    纯css下拉菜单 无需js

    这篇文章主要为大家详细介绍了纯css下拉菜单代码,无需js,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript倒计时定时器和间隔定时器使用详解

    JavaScript倒计时定时器和间隔定时器使用详解

    这篇文章主要为大家介绍了JavaScript倒计时定时器和间隔定时器使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-05-05
  • js中的闭包实例展示

    js中的闭包实例展示

    闭包是js中的一大特色,也是一大难点。下面这篇文章主要给大家介绍了关于js中闭包的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起看看吧
    2018-11-11
  • JavaScript优雅处理对象的6种方法

    JavaScript优雅处理对象的6种方法

    大家好,本篇文章主要讲的是JavaScript优雅处理对象的6种方法,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下哦,方便下次浏览
    2021-12-12
  • javascript垃圾收集机制与内存泄漏详细解析

    javascript垃圾收集机制与内存泄漏详细解析

    本文是对javascript中的垃圾收集机制与内存泄漏进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JavaScript使用arcgis实现截图截屏功能

    JavaScript使用arcgis实现截图截屏功能

    这篇文章主要为大家详细介绍了JavaScript如何使用arcgis实现截图截屏功能,类似于qq截图,文中的示例代码讲解详细,需要的可以参考一下
    2024-01-01
  • apply和call方法定义及apply和call方法的区别

    apply和call方法定义及apply和call方法的区别

    apply和call功能一样,只是传入的参数列表形式不同,本文给大家介绍apply和call方法定义及apply和call方法的区别,感兴趣的朋友一起学习吧
    2015-11-11
  • 获取对象

    获取对象

    获取对象...
    2006-08-08
  • echarts饼图各个板块之间的空隙如何实现

    echarts饼图各个板块之间的空隙如何实现

    这篇文章主要给大家介绍了关于echarts饼图各个板块之间的空隙如何实现的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • JavaScript中好用的数组对象排序方法分享

    JavaScript中好用的数组对象排序方法分享

    在日常工作中,我们经常需要对数组对象进行排序,尤其是在处理数据可视化需求中。本文将介绍一些简单而又实用的方法,帮助你实现对数组对象的某几个 key 进行排序
    2023-05-05

最新评论