用户在弹出窗口外单击时关闭Bootstrap Popover [英] Closing Bootstrap Popover When User Clicks Outside Popover

问题描述

我有一些动态加载到包含弹出窗口的网页上​​的内容。出于这个原因，我必须将它们绑定到正文，以便它们加载并正确显示。

I have some content that's dynamically loaded on a webpage that contains popovers. For this reason I have to bind them to the body so they load and appear correctly.

我想找到一种方法来在用户点击外部时隐藏弹出窗口弹出窗口或另一个弹出窗口触发器。

I'd like to find a way to hide the popovers when a user clicks outside the popover or on another popover trigger.

我发现如果我隐藏弹出框，弹出框确实隐藏但元素保留在DOM中。这意味着popover中的活动链接仍然是可点击的。

I found that if I "hide" the popover, the popover does indeed hide but the elements remain in the DOM. This means that active links in the popover remain "clickable".

如果我改为销毁popover，它会隐藏，但如果点击则无法重新激活。隐藏弹出窗口的唯一可靠方法是使用切换。这增加了确定隐藏哪些弹出窗口的复杂性。

If I instead destroy the popover, it hides, but is unable to re-activate if clicked on. The only reliable way to hide the popover is to use "toggle". This increases the complexity of determining which popovers to hide.

请参阅这个JSFiddle 包含所有这些代码。

Please see this JSFiddle with all this code.

HTML

<a href="#" data-toggle="popover" data-original-title="" data-content="<a href='http://www.yahoo.com'>http://www.yahoo.com</a>" class="some-popover-link">Yahoo</a>
<br><br> <br> <br> <br>  <a href="#" data-toggle="popover" data-original-title="" data-content="<a href='http://www.google.com'>http://www.google.com</a>" class="some-popover-link">Google</a>
<br><br> <br> <br> <br>  <a href="#" data-toggle="popover" data-original-title="" data-content="<a href='http://www.microsoft.com'>http://www.microsoft.com</a>" class="some-popover-link">Microsoft</a>

JavaScript

JavaScript

$('.some-popover-link').popover({
    container: 'body',
    html: true,
    placement: 'bottom'
});

$(document).click(function (e) {
    $('.some-popover-link').each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide'); // this hides popover, but content remains
            return;
        }
    });
});

推荐答案

这依赖于内部实施所以要小心，但它应该工作。 JSFiddle Link

This relies on internal implementation so be careful but it should work. JSFiddle Link

if ($(this).data('bs.popover').tip().hasClass('in')) {
    $(this).popover('toggle');
}

这篇关于用户在弹出窗口外单击时关闭Bootstrap Popover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！