用户在弹出窗口外单击时关闭Bootstrap Popover
我有一些内容在包含弹出框的网页上动态加载。 出于这个原因,我必须将它们绑定到身体,以便它们加载并正确显示。
当用户点击弹出窗口或其他弹出窗口触发器时,我想找到隐藏弹出窗口的方法。
我发现如果我“隐藏”popover,popover确实隐藏了但元素仍保留在DOM中。 这意味着popover中的活动链接仍然是“可点击的”。
如果我改为销毁popover,它会隐藏,但如果点击则无法重新激活。 隐藏弹出窗口的唯一可靠方法是使用“切换”。 这增加了确定隐藏哪些弹出窗口的复杂性。
请看这个JSFiddle所有这些代码。
HTML
<a href="#" data-toggle="popover" data-original-title="" data-content="http://www.yahoo.com" class="some-popover-link">Yahoo
<a href="#" data-toggle="popover" data-original-title="" data-content="http://www.google.com" class="some-popover-link">Google
<a href="#" data-toggle="popover" data-original-title="" data-content="http://www.microsoft.com" class="some-popover-link">Microsoft
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链接
if ($(this).data('bs.popover').tip().hasClass('in')) { $(this).popover('toggle'); }
使用此代码:
$(document).mouseup(function (e) { if ($('.popover').has(e.target).length === 0) { $('.popover').toggleClass('in').remove(); return; } });