我目前正在使用带有 Twitter Bootstrap 的弹出框，如下所示：
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.preventDefault();
});
如您所见，它们是手动触发的，单击 .popup-marker（带有背景图像的 div）会切换弹出框。这很好用，但我也希望能够通过点击页面上的其他任何地方（但不是在弹出框本身上！）来关闭弹出框。
我尝试了一些不同的事情，包括以下内容，但没有显示结果：
$('body').click(function(e) {
$('.popup-marker').popover('hide');
});
如何通过单击页面上的其他任何位置而不是单击弹出框本身来关闭弹出框？
假设在任何时候只有一个弹出窗口可见，您可以使用一组标志来标记何时有一个弹出窗口可见，然后才隐藏它们。
如果你在文档正文上设置了事件监听器，它会在你点击标有'popup-marker'的元素时触发。所以你必须调用stopPropagation()事件对象。并在单击弹出窗口本身时应用相同的技巧。
下面是执行此操作的有效 JavaScript 代码。它使用 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 个弹出窗口。但我认为这会让用户感到困惑，无论如何:-)
这更容易：
$('html').click(function(e) {
$('.popup-marker').popover('hide');
});
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.stopPropagation();
});
我有类似的需求，并发现了 Lee Carmichael 的 Twitter Bootstrap Popover 的这个很棒的小扩展，称为 BootstrapX - clickover。他在这里也有一些使用示例。基本上它会将弹出窗口更改为一个交互式组件，当您单击页面上的其他地方或弹出窗口中的关闭按钮时，该组件将关闭。这也将允许同时打开多个弹出窗口和一堆其他不错的功能。
使用示例
<button rel="clickover" data-content="Show something here.
<button data-dismiss='clickover'
>Close Clickover</button>"
>Show clickover</button>
javascript:
// load click overs using 'rel' attribute
$('[rel="clickover"]').clickover();
接受的解决方案给了我一些问题（单击打开的弹出框的“.popup-marker”元素使弹出框之后无法工作）。我想出了另一个非常适合我的解决方案，它非常简单（我使用的是 Bootstrap 2.3.1）：
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$('.popup-marker').not(this).popover('hide');
$(this).popover('toggle');
});
$(document).click(function(e) {
if (!$(e.target).is('.popup-marker, .popover-title, .popover-content')) {
$('.popup-marker').popover('hide');
}
});
更新：此代码也适用于 Bootstrap 3！
在http://getbootstrap.com/javascript/#popovers阅读“在下次点击时关闭”
您可以使用焦点触发器在下次单击时关闭弹出窗口，但您必须使用<a>标签，而不是<button>标签，并且您还必须包含一个tabindex属性...
例子：
<a href="#" tabindex="0" class="btn btn-lg btn-danger"
data-toggle="popover" data-trigger="focus" title="Dismissible popover"
data-content="And here's some amazing content. It's very engaging. Right?">
Dismissible popover
</a>