如何通过单击外部来关闭 Twitter Bootstrap 弹出窗口？

Posted 2023-02-24

【中文标题】如何通过单击外部来关闭 Twitter Bootstrap 弹出窗口？

【英文标题】：How to dismiss a Twitter Bootstrap popover by clicking outside?

【发布时间】：2012-07-27 00:49:42

【问题描述】：

我们能否像模态框一样让弹出框被关闭，即。当用户点击它们之外的某个地方时让它们关闭？

不幸的是，我不能只使用真正的模态而不是弹出框，因为模态意味着位置：固定，那将不再是弹出框了。 :(

【问题讨论】：

类似问题：***.com/q/8947749/1478467

试试这个***.com/a/40661543/5823517。不涉及通过父母循环

data-trigger="hover" 和 data-trigger="focus" 是关闭弹出框的内置替代方法，如果您不想使用切换。在我看来，data-trigger="hover" 提供了最好的用户体验……无需编写额外的 .js 代码……

【参考方案1】：

我做了一个 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');
);

【讨论】：

不错的演示。我想知道如何在 Jquery 对象上调用 popover，popover 是一个引导 js 插件，但你不包含任何引导 js 文件？

jsfiddle中有一个js文件。查看左侧栏 -> 管理资源。

好的，我看到有一个引导 js。但是没有勾选，还能用吗？

是的，它有效。无论如何，我在谷歌搜索：jsfiddle bootstrap 它给了我在 jsfiddle 中引导 css+js 的骨架。

我唯一的问题是单击它时隐藏了弹出框。还不如只使用一个工具提示。

【参考方案2】：

这基本上不是很复杂，但有一些检查可以避免故障。

Demo (jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() 
    var $this = $(this);
    $this.on('hover',function() 
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    );
);

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() 
    $poped.popover('hide');
);

【讨论】：

这会通过点击任何地方而不是外部来关闭模式

是否可以通过点击而不是悬停popover() 来做到这一点？

当然可以，但是您需要在传递给点击处理程序的事件上调用stopPropagation()（如果没有，hiding 处理程序会立即隐藏弹出框）。 Demo (jsfiddle)

我在下面用更少的代码获得了相同的功能。这个答案对于这个问题来说有点臃肿而且有点荒谬......他想要的只是当你在外面点击时关闭弹出窗口......这是矫枉过正和丑陋！

更正，我相信我在 FAR 更少的代码中拥有更好的功能。它假设您一次只希望一个弹出窗口可见。如果你喜欢这个，请在​​下面投票给我的答案：jsfiddle.net/P3qRK/1 answer:***.com/a/14857326/1060487

【参考方案3】：

这在here 之前已被问到。我当时给出的相同答案仍然适用：

我也有类似的需求，发现了这个great little extension of the Twitter Bootstrap Popover by Lee Carmichael, called BootstrapX - clickover。他还有一些使用示例here。基本上，它将弹出框更改为交互式组件，当您单击页面上的其他位置或弹出框内的关闭按钮时，该组件将关闭。这也将允许同时打开多个弹出框以及许多其他不错的功能。

【参考方案4】：

jQuery("#menu").click(function() return false; );
jQuery(document).one("click", function()  jQuery("#menu").fadeOut(); );

【参考方案5】：

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

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

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

【参考方案6】：

更新：更强大的解决方案：http://jsfiddle.net/mattdlockyer/C5GBU/72/

对于仅包含文本的按钮：

$('body').on('click', function (e) 
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0)  
        $('[data-toggle="popover"]').popover('hide');
    
);

对于包含图标的按钮，请使用 （此代码在 Bootstrap 3.3.6 中有一个错误，请参阅此答案中的以下修复）

$('body').on('click', function (e) 
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0)  
            $('[data-toggle="popover"]').popover('hide');
        
    );

对于 JS 生成的弹出框使用 '[data-original-title]' 代替 '[data-toggle="popover"]'

警告：上述解决方案允许同时打开多个弹出框。

请一次弹出一个：

更新： Bootstrap 3.0.x，见代码或小提琴http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('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('hide');
        
    );
);

这将处理已打开但未点击的弹出框的关闭，或者它们的链接尚未点击。

---

更新： Bootstrap 3.3.6，see fiddle

修复了关闭后需要点击 2 次才能重新打开的问题

$(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)                 
            (($(this).popover('hide').data('bs.popover')||).inState||).click = false  // fix for BS 3.3.6
        

    );
);

更新：利用之前改进的条件，实现了这个解决方案。修复双击和重影弹窗问题：

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function()
    $(this).attr('someattr','1');
);
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function()
    $(this).attr('someattr','0');
);
$(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).attr('someattr')=="1")
                $(this).popover("toggle");
            
        
    );
);

【讨论】：

我附加到$(document) 而不是$('body')，因为有时body 不会延伸到整个页面。

激活弹出框（以及随后的隐藏操作）后，弹出框并未完全隐藏；它只是不可见。问题是无法单击或悬停不可见但存在的弹出框下方的内容。最新的 Chrome 版本、最新的 bootstrap 3 .js 出现问题（也可能是其他浏览器，因为无论如何都需要这种解决方法，所以懒得检查）

我使用 '[data-original-title]' 作为选择器，而不是 '[data-toggle="popover"]'，它不适用于 javascript 生成的弹出框。

有谁知道为什么这个解决方案不适用于最新版本的引导程序？发生以下情况：单击按钮以显示弹出框，然后单击主体以关闭弹出框，然后单击按钮以显示弹出框并且弹出框不显示。如果再次单击它会失败一次，它会显示。很奇怪。

【参考方案7】：

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

这是我的解决方案。

【参考方案8】：

$('html').on('mouseup', function(e) 
    if(!$(e.target).closest('.popover').length) 
        $('.popover').each(function()
            $(this.previousSibling).popover('hide');
        );
    
);

如果您单击弹出框以外的任何位置，则会关闭所有弹出框

Bootstrap 4.1 更新

$("html").on("mouseup", function (e) 
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) 
        $(".popover").each(function () 
            $(this).popover("hide");
        );
    
);

【讨论】：

我在按钮上添加了一个触发弹出框 (pop-btn) 的类，所以它不包含在内... if(!$(e.target).closest('.popover') .length && !$(e.target).closest('.btn').hasClass('pop-btn'))

带有 3 个弹出按钮，此代码会产生问题。在某些情况下，我无法单击按钮并且按钮会闪烁。

无法使此代码正常工作...检查此小提琴，请在您的答案中添加一个小提琴。 jsfiddle.net/C5GBU/102

非常适合我。当我的“外部点击”碰巧打开一个新的弹出框时，其他答案会产生副作用。

这很好用，但需要有一种方法来适应它，这样如果你点击弹出框的内容，它就不会关闭。例如如果您单击弹出框内的 标记内的文本...

【参考方案9】：

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

【参考方案10】：

好的，这是我第一次尝试在 *** 上实际回答一些问题，所以这里什么都没有：P

似乎不太清楚这个功能在最新的引导程序上是否真的可以开箱即用（好吧，如果你愿意妥协用户可以点击的位置。我'我不确定您是否必须将“单击悬停”本身放置，但在 iPad 上，单击用作切换。

最终结果是，您可以在桌面上悬停或单击（大多数用户会悬停）。在触摸设备上，触摸元素会将其抬起，再次触摸会将其取下。当然，这与您的原始要求略有妥协，但至少您的代码现在更干净了 :)

$(".my-popover").popover( 触发器：'单击悬停' );

【参考方案11】：

使用 bootstrap 2.3.2，您可以将触发器设置为“焦点”，它就可以正常工作：

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

【讨论】：

+1，但重要的旁注：如果您再次单击按钮或锚点，这不会关闭弹出窗口，而接受的答案会关闭。

【参考方案12】：

聚会迟到了……但我想我会分享的。 我喜欢弹出框，但它的内置功能太少了。我写了一个引导扩展 .bubble() ，这就是我想要的 popover 的一切。四种解除方法。点击外部，打开链接，点击 X，然后点击退出。

它会自动定位，因此它永远不会离开页面。

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

这不是无缘无故的自我推销……我这辈子抓过别人的代码很多次，我想贡献自己的力量。试一试，看看它是否适合你。

【参考方案13】：

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

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

上面的 sn-p 在 body 上附加了一个点击事件。 当用户单击弹出框时，它的行为将正常。 当用户点击不是弹出框的东西时，它会关闭所有弹出框。

它也适用于使用 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');
  
);

【讨论】：

遇到了类似的问题，这在 Bootstrap 3 中有效。

如果您将弹出框拉得更近，使弹出框重叠，当您通过单击外部某处隐藏弹出框时，其中一个链接将停止工作。检查：jsfiddle.net/qjcuyksb/1

在弹出窗口中使用 bootstrap-datepicker 时，最后一个版本不起作用。

我最喜欢这个解决方案，因为接受的答案开始有点消耗资源，有 30 个左右的弹出窗口

也许!$(e.target).closest('.popover.in').length 会比!$(e.target).parents().is('.popover.in') 更有效率。

【参考方案14】：

我想出了这个： 我的场景包括同一页面上的更多弹出框，隐藏它们只会使它们不可见，因此，无法单击弹出框后面的项目。 这个想法是将特定的弹出框链接标记为“活动”，然后您可以简单地“切换”活动的弹出框。这样做将完全关闭弹出框 $('.popover-link').popover( html : true, container: '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"

【参考方案15】：

我只是在显示新的弹出框之前删除其他活动的弹出框（引导程序 3）：

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () 
    $('.popover.in').remove();
);              

【参考方案16】：

使用 Matt Lockyer 的代码，我做了一个简单的重置，这样 dom 就不会被隐藏的元素覆盖。

马特的代码：http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

小提琴：http://jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) 
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () 
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) 
            $('.popover').css('display', 'block');
        
    );
    //hide popover with .popover method
    $('[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('hide');
        
    );
);

【参考方案17】：

试试这个，点击外面会隐藏。

$('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('hide');
    
    );
);

【参考方案18】：

根据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'
)

【讨论】：

不适用于遵循 OS X 原生行为的 Mac 浏览器（点击时不会聚焦或模糊按钮）。其中包括 Firefox 和 Safari。引导人员在这里犯了一个大错误，因为这些弹出窗口甚至无法打开，更不用说关闭了。

@AnteVrli 也许当你写评论时这还没有出现在文档中，但现在文档说：“为了正确的跨浏览器和跨平台行为，你必须使用 <a> 标签，不是<button> 标签，您还必须包含role="button" 和tabindex 属性。”你试过这些规格吗？

嗯，这个答案存在一个问题，这与平台兼容性无关：按下鼠标按钮在弹出框将关闭弹出框，因为触发弹出框的元素将失去焦点。忘记让用户能够从弹出框复制和粘贴：只要按下鼠标按钮，弹出框就会关闭。如果您在弹出窗口中有可操作的项目（按钮、链接），用户将无法使用它们。

对于“跨平台”来说太多了，因为在引导程序 4.0.0-beta 和 4.0.0-beta.2 中，我无法让它在 Chrome 中的 Mac 上运行 :(

【参考方案19】：

我在使用 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 会删除元素，因此选择器部分对于初始化弹出框很重要。

【参考方案20】：

如果您使用选择器委托创建弹出框，“隐藏”方法似乎不起作用，而必须使用“销毁”。

我让它这样工作：

$('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 here

【参考方案21】：

我们发现@mattdlockyer 的解决方案存在问题（感谢您的解决方案！）。当像这样使用 popover 构造函数的 selector 属性时...

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

...为 BS3 提出的解决方案将不起作用。相反，它会在其$(this) 本地创建第二个弹出框实例。这是我们防止这种情况的解决方案：

$(document.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) 
            var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
            if (bsPopover) bsPopover.hide();
        
    );
);

如前所述，$(this).popover('hide'); 将由于委托侦听器而创建第二个实例。提供的解决方案仅隐藏已实例化的弹出框。

我希望我能为你们节省一些时间。

【参考方案22】：

@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');
        

【参考方案23】：

$('html').on('click.popover', function (e) 
    var allpopins = $('.popover.in');
    if (allpopins.has(e.target).length > 0 &&
        !$('.btn', allpopins).is(e.target))
        return;
    // recognise pop-up 
    var id = $(e.target).attr('aria-describedby');
    var popin = $("#" + id);
    //on any button click in entire pop-up hide this pop-ups
    $(popin).on(".btn", function ()  popin.remove(); );
    // on any place out of entire popup hide all pop-ups 
    $('.popover.in').not(popin).remove();
);

这是我最好的性能解决方案。干杯。

【参考方案24】：

没有一个所谓的高票解决方案对我来说是正确的。 在第一次打开和关闭（通过单击其他元素）弹出框后，每个都会导致错误，它不会再次打开，直到您在触发链接上单击 两次 而不是一次.

所以我稍微修改了一下：

$(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-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');
         else 
            //fixes issue described above
            $popover.popover('toggle');
        
    );
)

【讨论】：

很好，它对我有用。顺便说一句，您忘记了）；在最后

之后的代码末尾

第二次点击也有同样的问题。这应该是万无一失的答案！

我也尝试了上述之前的解决方案，但作为对那些也在寻找 2016 年解决方案的人的指导，这是一个更好的解决方案。

最佳答案，如宣传的那样工作。如前所述，其他人没有。这应该是最佳答案

除了我没有使用 data-toggel="popover" 外，效果很好。但是您可以指定任何与您的弹出框触发器元素匹配的选择器。不错的解决方案，也是唯一为我解决了两次点击问题的解决方案。

【参考方案25】：

修改后的接受解决方案。我所经历的是，在隐藏了一些弹出框后，它们必须单击两次才能再次显示。这是我为确保在已隐藏的弹出框上不会调用 popover('hide') 所做的操作。

$('body').on('click', function (e) 
    $('[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) 
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) 
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            
        
    );
);

【参考方案26】：

答案非常好，只是添加一个角度指令，以防你像我一样使用角度：

app.directive('popover', ['$document', function($document) 
    return 
        restrict: 'EA',
        link: function(scope, elem, attrs) 
            $(document).ready(function() 
                $('[data-toggle="popover"]').popover();
            );

            elem.bind('click', function(e) 
                $('#notification').popover('toggle');
            )

            $('body').on('click', function (e) 
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!elem.is(e.target)
                    && elem.has(e.target).length === 0
                    && $('.popover').has(e.target).length === 0) 
                    elem.popover('hide');
                
            );
        
    ;
]);

html代码：

<a popover tabindex="0" role="button"
   id="notification"
   data-toggle="popover" data-trigger="manual"
   data-container="body" data-placement="bottom"
   data-content="This is a popover">
   Popover button
</a>

它应该像使用data-trigger='click focus' 一样简单，因为根据引导程序：

如何触发弹出框 - 点击 |悬停 |焦点 |手动的。您可以传递多个触发器；用空格分隔它们。手动不能与任何其他触发器结合使用。

但是，由于未知原因，同时使用 click 和 focus 对我不起作用，而是我必须手动切换它。

【参考方案27】：

用 3.3.6 测试，第二次点击没问题

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

        $(document).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('hide');
                
            );
        );

【参考方案28】：

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

【讨论】：

能否请edit 您的回答在此行添加一些评论？它是做什么的，它是如何工作的，它与其他解决方案有何不同，是否有任何警告......谢谢！

【参考方案29】：

引导程序natively supports this:

JS Bin Demo

下次点击关闭时需要特定标记

为了正确的跨浏览器和跨平台行为，您必须使用<a> 标签，不是<button> 标签，您还必须包含role="button" 和tabindex属性。

【讨论】：

在引导程序 4.0.0-beta 和 4.0.0-beta.2 中，我无法让它在 Chrome 中的 Mac 上运行 :(

点击任意位置关闭此弹窗，提问者要求“点击弹窗外关闭它”，这是不同的。

【参考方案30】：

此解决方案在第二次显示弹出框时消除了令人讨厌的第二次点击

使用 Bootstrap v3.3.7 测试

$('body').on('click', function (e) 
    $('.popover').each(function () 
        var popover = $(this).data('bs.popover');
        if (!popover.$element.is(e.target)) 
            popover.inState.click = false;
            popover.hide();                
        
    );
);