这种方法确保您可以通过单击页面上的任何位置来关闭弹出窗口。如果你点击另一个可点击的实体，它会隐藏所有其他弹窗。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')

只需将此属性添加到html元素，以关闭弹出窗口在下次点击。

data-trigger="focus"

参考来自https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

您还可以使用事件冒泡从DOM中删除弹出框。它有点脏，但工作正常。

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

在html中，将.popover-close类添加到应该关闭弹出窗口的内容中。

演示: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;
});

}

这是我的解。

$("body").find('.popover').removeClass('in');

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

演示: 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');
  }
});