引导5更新:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-bs-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } 
    });
})

我有问题与mattdlockyer的解决方案，因为我设置弹窗链接动态使用如下代码:

$('body').popover({
        selector : '[rel="popover"]'
});

所以我必须这样修改它。它为我解决了很多问题:

$('html').on('click', function (e) {
  $('[data-toggle="popover"]').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) {
        $(this).popover('destroy');
    }
  });
});

记住destroy删除元素，所以选择器部分在初始化弹窗时很重要。

我试过很多以前的答案，真的没有一个对我有效，但这个解决方案管用:

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

他们建议使用锚标记而不是按钮，并注意role="button" + data-trigger="focus" + tabindex="0"属性。

Ex:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>

我做了一个jsfiddle来告诉你如何做到这一点:

http://jsfiddle.net/3yHTH/

其思想是在单击按钮时显示弹出窗口，在单击按钮外时隐藏弹出窗口。

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

JS

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});

如果你使用选择器委托创建弹出窗口，那么'hide'方法似乎不起作用，而必须使用'destroy'。

我是这样做的:

$('body').popover({
    selector: '[data-toggle="popover"]'
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').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) {
            $(this).popover('destroy');
        }
    });
});

关于这个课题JSfiddle

这个派对来得太晚了……但我想分享一下 我喜欢弹窗，但是它的内置功能太少了。我写了一个引导扩展.bubble()，这就是我想要的弹窗的一切。四种解题方法。单击外部，切换链接，单击X，然后单击escape。

它会自动定位，所以永远不会离开页面。

https://github.com/Itumac/bootstrap-bubble

这不是毫无理由的自我推销……在我的生活中，我已经多次获得别人的代码，我想贡献我自己的努力。试一试，看看是否对你有用。