如何通过页面上任何地方(否则)点击关闭Twitter Bootstrap popover? [英] How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?
问题描述
我目前正在使用Twitter Bootstrap的popovers,就像这样发起:
I'm currently using popovers with Twitter Bootstrap, initiated like this:
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.preventDefault();
});
如你所见,它们是手动触发的,然后点击.popup-marker(这是带有背景图像的div)切换弹出窗口。这很好用,但我也希望能够通过点击页面上任何其他位置来关闭popover(但不能在popover本身!)。
As you can see, they're triggered manually, and clicking on .popup-marker (which is a div with a background image) toggles a popover. This works great, but I'd like to also be able to close the popover with a click anywhere else on the page (but not on the popover itself!).
我尝试了一些不同的东西,包括以下内容,但没有显示结果:
I've tried a few different things, including the following, but with no results to show for it:
$('body').click(function(e) {
$('.popup-marker').popover('hide');
});
如何通过点击页面上的任何其他位置来关闭popover,但不能点击弹出窗口本身?
推荐答案
假设任何时候只能看到一个弹出框,你可以使用当一个弹出窗口可见时标记的一组标志,然后才隐藏它们。
Presuming that only one popover can be visible at any time, you can use a set of flags to mark when there's a popover visible, and only then hide them.
如果在文档正文上设置事件监听器,则单击时会触发它标有弹出标记的元素。因此,您必须在事件对象上调用 stopPropagation()
。单击popover本身时应用相同的技巧。
If you set the event listener on the document body, it will trigger when you click the element marked with 'popup-marker'. So you'll have to call stopPropagation()
on the event object. And apply the same trick when clicking on the popover itself.
下面是一个可以执行此操作的JavaScript代码。它使用jQuery> = 1.7
Below is a working JavaScript code that does this. It uses jQuery >= 1.7
jQuery(function() {
var isVisible = false;
var hideAllPopovers = function() {
$('.popup-marker').each(function() {
$(this).popover('hide');
});
};
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).on('click', function(e) {
// if any other popovers are visible, hide them
if(isVisible) {
hideAllPopovers();
}
$(this).popover('show');
// handle clicking on the popover itself
$('.popover').off('click').on('click', function(e) {
e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
});
isVisible = true;
e.stopPropagation();
});
$(document).on('click', function(e) {
hideAllPopovers();
isVisible = false;
});
});
http://jsfiddle.net/AFffL/539/
唯一需要注意的是,你将无法打开2个弹出窗口同一时间。但我觉得这对用户来说会让人感到困惑: - )
The only caveat is that you won't be able to open 2 popovers at the same time. But I think that would be confusing for the user, anyway :-)
这篇关于如何通过页面上任何地方(否则)点击关闭Twitter Bootstrap popover?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!