根据http://getbootstrap.com/javascript/#popovers，

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

使用焦点触发器可以在用户下一次单击时取消弹出窗口。

$('.popover-dismiss').popover({
    trigger: 'focus'
})

我想到了这个: 我的场景是在同一个页面上包含更多弹窗，隐藏它们只是让它们不可见，因此，点击弹窗后面的项目是不可能的。 这个想法是将特定的弹出窗口链接标记为“活动”，然后你可以简单地“切换”活动弹出窗口。这样做将完全关闭弹窗 $ (' .popover-link ')。弹出窗口({HTML: true，容器:'body'})

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"

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

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>

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

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

我找到了一个解决这个问题的好方法。 通过这种方式，我们只在需要时激活事件侦听器。 此外，我们没有弹窗不出现的问题，因为 事件解除弹出窗口正在同时开火。

将弹出窗口添加到HTML中

   <input id="popoverId" type="text" data-toggle="popover" data-trigger="manual" data-content="Popover content">

当你需要时显示弹出窗口。

$('#popoverId').popover('show');

将这个侦听器添加到Javascript中。这个侦听器将在弹出窗口显示时立即启动 并将一个侦听器附加到将隐藏 当用户单击页面主体的任何位置时弹出窗口，然后删除事件侦听器，直到弹出窗口再次显示。

$('#popoverId').on('shown.bs.popover', function () {
    $('body').click(function () {
        $('#popoverId').popover('hide');
        $('body').off();
    });
});

来自@guya的答案是有效的，除非你在弹出窗口中有像日期选择器或时间选择器这样的东西。为了解决这个问题，这就是我所做的。

if (typeof $(e.target).data('original-title') === 'undefined' && 
    !$(e.target).parents().is('.popover.in')) {
        var x = $(this).parents().context;
        if(!$(x).hasClass("datepicker") && !$(x).hasClass("ui-timepicker-wrapper")){
            $('[data-original-title]').popover('hide');
        }
}