通過單擊下一個關閉上一個彈出框

Question

我的頁面上有很多彈出框，我想通過單擊下一個彈出框關閉以前打開的彈出框。

它的工作原理！但是當我再次點擊之前的彈出窗口時，我必須點擊兩次！

我也想通過點擊外面來關閉彈出窗口。

​​

關閉所有酥料餅除了當前

$('.triggerOverlay').on('click', function (e) { 
    $('.triggerOverlay').not(this).popover('hide'); 
}); 

小提琴

https://jsfiddle.net/yasirhaleem/43qfkjtb/

Answer 1

這應該下面的代碼。將click事件偵聽器添加到文檔中，並始終隱藏彈出窗口。
如果事件目標是帶有彈出式窗口的錨定標記之一，然後切換它。還將trigger屬性添加到設置爲manual的popover選項。

$(document).ready(function() { 
 

 
    $('.triggerOverlay').popover({ 
 
    html : true, 
 
    content: function() { 
 
     var $this = $(this); 
 
     var cont = $this.data('toggle'); 
 
     return $('#'+cont).html(); 
 
    }, 
 
    trigger: 'manual' 
 
    }); 
 

 

 
    $(document).on('click', function (e) { 
 
    // always hide them all. 
 
    $('.triggerOverlay').popover('hide'); 
 
    // if e.target has a popover toggle it. 
 
    if ($(e.target).hasClass('triggerOverlay')) { 
 
     $(e.target).popover('toggle'); 
 
    } 
 
    }); 
 

 
});

.customoverlay{display:none;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<a href="#" data-toggle="user-profile-overlay" class="triggerOverlay">button</a><br><br><br><br><br> 
 
<div id="user-profile-overlay" class="customoverlay">content goes here</div> 
 
<a href="#" data-toggle="user-profile-overlay1" class="triggerOverlay">button</a><br><br><br><br> 
 
<div id="user-profile-overlay1" class="customoverlay">second content goes here</div> 
 
<a href="#" data-toggle="user-profile-overlay2" class="triggerOverlay">button</a><br><br><br> 
 
<div id="user-profile-overlay2" class="customoverlay">third content goes here</div>