5

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

当用户在弹出框外部或另一个弹出框触发器上单击时，我想找到一种隐藏弹出框的方法。

我发现如果我“隐藏”弹出框，弹出框确实会隐藏，但元素仍保留在 DOM 中。这意味着弹出窗口中的活动链接保持“可点击”。

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

请使用所有这些代码查看此 JSFiddle 。

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

$('.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;
        }
    });
});
4

2 回答 2

8

这依赖于内部实现，所以要小心，但它应该可以工作。JSFiddle 链接

if ($(this).data('bs.popover').tip().hasClass('in')) {
    $(this).popover('toggle');
}
于 2013-10-31T00:17:26.877 回答
6

使用此代码：

$(document).mouseup(function (e) {
    if ($('.popover').has(e.target).length === 0) {
        $('.popover').toggleClass('in').remove();
        return;
    }
});
于 2013-10-30T23:05:43.230 回答