快捷導(dǎo)航

bootstrap 點(diǎn)擊空白處popover彈出框隱藏實(shí)例

更新時(shí)間：2018年01月24日 11:35:20 作者：Hubert__

下面小編就為大家分享一篇bootstrap 點(diǎn)擊空白處popover彈出框隱藏實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

代碼：

<div>
 <a class="btn btn-success show" title="Popover title"
   data-container="body" data-toggle="popover" data-placement="bottom"
   data-content="底部的 Popover 中的一些內(nèi)容"> aaaa </a>
</div>
<script>
 $(function () {
  initPopover();
 })
 function initPopover() {
  $(".show").popover({
   container: "body",
   trigger: " manual" //手動(dòng)觸發(fā)
  }).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>

注意點(diǎn)：

1、不適用于button，a、img等可用

2、show.bs.popover:當(dāng)調(diào)用show 實(shí)例方法時(shí)立即觸發(fā)該事件。

shown.bs.popover:當(dāng)彈出框?qū)ν耆珡棾鰰r(shí)觸發(fā)該事件（將等待 CSS 過渡效果完成）。
hide.bs.popover:當(dāng)調(diào)用hide 實(shí)例方法時(shí)立即觸發(fā)該事件。
hidden.bs.popover:當(dāng)工具提示完全隱藏時(shí)觸發(fā)該事件（將等待 CSS 過渡效果完成）。

3、引入jquery和bootstrap頭文件

4、取消冒泡

以上這篇bootstrap 點(diǎn)擊空白處popover彈出框隱藏實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

純css下拉菜單無需js
這篇文章主要為大家詳細(xì)介紹了純css下拉菜單代碼，無需js，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
JavaScript倒計(jì)時(shí)定時(shí)器和間隔定時(shí)器使用詳解
這篇文章主要為大家介紹了JavaScript倒計(jì)時(shí)定時(shí)器和間隔定時(shí)器使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2023-05-05
js中的閉包實(shí)例展示
閉包是js中的一大特色，也是一大難點(diǎn)。下面這篇文章主要給大家介紹了關(guān)于js中閉包的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧
2018-11-11
JavaScript優(yōu)雅處理對(duì)象的6種方法
大家好，本篇文章主要講的是JavaScript優(yōu)雅處理對(duì)象的6種方法，感興趣的同學(xué)趕快來看一看吧，對(duì)你有幫助的話記得收藏一下哦，方便下次瀏覽
2021-12-12
javascript垃圾收集機(jī)制與內(nèi)存泄漏詳細(xì)解析
本文是對(duì)javascript中的垃圾收集機(jī)制與內(nèi)存泄漏進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
JavaScript使用arcgis實(shí)現(xiàn)截圖截屏功能
這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用arcgis實(shí)現(xiàn)截圖截屏功能,類似于qq截圖,文中的示例代碼講解詳細(xì),需要的可以參考一下
2024-01-01
apply和call方法定義及apply和call方法的區(qū)別
apply和call功能一樣，只是傳入的參數(shù)列表形式不同，本文給大家介紹apply和call方法定義及apply和call方法的區(qū)別，感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
獲取對(duì)象
獲取對(duì)象...
2006-08-08
echarts餅圖各個(gè)板塊之間的空隙如何實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于echarts餅圖各個(gè)板塊之間的空隙如何實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
JavaScript中好用的數(shù)組對(duì)象排序方法分享
在日常工作中，我們經(jīng)常需要對(duì)數(shù)組對(duì)象進(jìn)行排序，尤其是在處理數(shù)據(jù)可視化需求中。本文將介紹一些簡(jiǎn)單而又實(shí)用的方法，幫助你實(shí)現(xiàn)對(duì)數(shù)組對(duì)象的某幾個(gè) key 進(jìn)行排序
2023-05-05