通过单击下一个关闭上一个弹出框

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>