演示:http://jsfiddle.net/nessajtr/yxpM5/1/

var clickOver = clickOver || {};
clickOver.uniqueId = $.now();

clickOver.ClickOver = function (selector, options) {
    var self = this;

    //default values
    var isVisible, clickedAway = false;

    var callbackMethod = options.content;
var uniqueDiv = document.createElement("div");
var divId = uniqueDiv.id = ++clickOver.uniqueId;
uniqueDiv.innerHTML = options.loadingContent();

options.trigger = 'manual';
options.animation = false;
options.content = uniqueDiv;

self.onClose = function () {
    $("#" + divId).html(options.loadingContent());
    $(selector).popover('hide')
    isVisible = clickedAway = false;
};
self.onCallback = function (result) {
    $("#" + divId).html(result);
};

$(selector).popover(options);

//events
$(selector).bind("click", function (e) {
    $(selector).filter(function (f) {
        return $(selector)[f] != e.target;
    }).popover('hide');

    $(selector).popover("show");
    callbackMethod(self.onCallback);

    isVisible = !(clickedAway = false);
});

$(document).bind("click", function (e) {
    if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
        self.onClose();
        isVisible = clickedAway = false;
    } else clickedAway = true;
});

}

这是我的解。

这个问题之前已经被问到过了。我当时给出的答案仍然适用:

我也有类似的需求，并找到了这个很棒的小扩展的Twitter引导弹窗由李卡迈克尔，称为BootstrapX -点击。他还提供了一些用法示例。基本上，它会将弹出窗口更改为一个交互式组件，当您单击页面的其他地方或弹出窗口中的关闭按钮时，该组件将关闭。这也将允许多个弹窗一次打开和一堆其他不错的功能。

这种方法确保您可以通过单击页面上的任何位置来关闭弹出窗口。如果你点击另一个可点击的实体，它会隐藏所有其他弹窗。animation:false是必需的，否则你将在你的控制台得到jquery .remove错误。

$('.clickable').popover({
 trigger: 'manual',
 animation: false
 }).click (evt) ->
  $('.clickable').popover('hide')
  evt.stopPropagation()
  $(this).popover('show')

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')

使用bootstrap 2.3.2，你可以将触发器设置为“focus”，它就可以工作了:

$('#el').popover({trigger:'focus'});

最简单，最安全的版本，适用于任何引导版本。

演示: http://jsfiddle.net/guya/24mmM/

演示2:在弹出窗口内容中单击时不会解散 http://jsfiddle.net/guya/fjZja/

演示3:多个弹窗: http://jsfiddle.net/guya/6YCjW/

简单地调用这一行将会解散所有弹窗:

$('[data-original-title]').popover('hide');

当点击外部时，用下面的代码解散所有弹出窗口:

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

上面的代码片段在主体上附加了一个单击事件。 当用户点击弹出窗口时，它会正常运行。 当用户点击非弹窗的东西时，它会关闭所有弹窗。

它还可以与Javascript启动的弹窗一起工作，而不是其他一些不工作的例子。(详见演示)

如果你不想在点击弹出窗口内容时取消，请使用以下代码(参见第二个演示的链接):

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

接受答案的最新更新有一个问题: 如果您启用了一些工具提示，然后打开一个弹出窗口，然后单击具有工具提示的元素，则工具提示的文本将显示为弹出窗口。

为了防止这种情况，只需添加

 if ($(this).data('bs.popover')) {

在if-statement内部(或将其与&&连接到if-statement中)

// only show one popover at the time and hide on clicking outside
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            if ($(this).data('bs.popover')) {
                (($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false  // fix for BS 3.3.6
            }
        }
    });
});