Bootstrap弹出窗口，点击外面隐藏？答案

【问题标题】：Bootstrap popover, hide on click outside?Bootstrap弹出窗口，点击外面隐藏？
【发布时间】：2013-12-26 08:13:33
【问题描述】：

使用引导弹出框，现在我试图让此代码在弹出框外部单击以关闭弹出框：

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

但是当我使用这部分时，我可以关闭弹出框但我无法单击其他按钮，有人知道我该怎么做吗？

所有按钮：

<a href="#" class="btn btn-xs btn-primary" data-toggle="popover">This opens popover</a>
<a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work 
<a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work

【问题讨论】：

最好检查你的z-index 我认为弹出框已经克服了一些问题
@RahilWazir 这有点帮助，弹出框有类 .fade 和淡入，并且 .fade 有 opacity:0 所以它仍然存在但仍然没有^^现在我需要找出如何从那里删除不透明度，因为当我这样做时，我用于关闭它的代码将不起作用
做个小提琴会很有帮助的。
不起作用是什么意思？能提供一个关于jsfiddle的demo吗？

标签： jquery twitter-bootstrap

【解决方案1】：

我发现了这个：http://bootply.com/99372

$('body').on('click', function (e) {
    $('[data-toggle=popover]').each(function () {
        // hide any open popovers when the anywhere else in the body is clicked
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

和你的代码几乎一样……

【讨论】：

这个问题，由于某种原因，手动调用的 popover('hide') 不会将其从 dom 中删除，因此 popover div 保留并覆盖其下的任何内容。
你能解释一下你的问题或创造一个小提琴吗？
Bootstrap 发布了解决我的问题的版本，因此您的解决方案现在可以按照您的描述工作。在此之前，popover 将在 dom 中保持自身。它将是不可见的，但仍保持其 HxW，从而使其 z-index 下方的任何元素都无法点击。
也适用于工具提示，只需将所有 popover 字符串更改为 tooltip
我建议使用“mousedown”事件而不是“click”。这种方式弹出框也将在长时间选择或拖放时隐藏。

【解决方案2】：

只需添加此元素即可在下次单击时关闭弹出框。

data-trigger="focus"

来自这里的参考： Bootstrap Popover

【讨论】：

有人愿意解释为什么这个答案被否决了吗？对我来说，这似乎是一个完美的答案。简短、具体、正确，甚至参考了官方文档。我不明白。
我不是那个反对它的人，但原因可能是这不是那个人问的。他（和我）希望只有在单击 OUTSIDE 时弹出框才会消失。 data-trigger="focus" 在里面点击时也会隐藏它。
@Asaf 不，这不是...我想在内部和外部点击都关闭，但只有在我点击外部时才有效.. 我怎样才能同时存档。在里面，我的意思是ICON，点击后会出现弹出窗口。是的，它确实会在你点击弹出框内时消失。

【解决方案3】：

事实上，你甚至不需要 JS，因为 Bootstrap 中已经有这个设置了。

见：http://getbootstrap.com/javascript/#dismiss-on-next-click

"下次单击时关闭所需的特定标记对于正确的跨浏览器和跨平台行为，您必须使用 <a> 标签，而不是 <button> 标签，并且您还必须包含 role="button" 和 tabindex 属性。"

例如。：

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

【讨论】：

如果您包含来自外部资源的相关（代码）部分，而不是仅仅链接到它，这总是有帮助的。
虽然这不是最完整的答案，但这是正确的做法。但是，如果您选择将任何交互式内容放入其中，这将不起作用，因为所有点击都会关闭弹出框。
在需要 data-trigger="focus" 否则它不起作用。示例：
感谢您的解决方案有效。 Bootstrap 为其提供了默认设置。
这会在第二次点击时关闭弹出框，而不是在外部点击时关闭。即使我在弹出框内单击也会关闭

【解决方案4】：

试试这个。单击弹出框的外部时，它将关闭弹出框。

$('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').data('bs.popover') || {}).inState || {}).click = false;
}
});

另一种解决方案，

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

添加 tabindex="0" 和 data-trigger="focus"

【讨论】：

【解决方案5】：

仅仅隐藏弹出框是行不通的。您将需要单击两次才能再次显示弹出框。 https://github.com/twbs/bootstrap/issues/16732

为了让它在 Bootstrap 3.3.6 中正常工作。试试这个：

$('body').on('click', function (e) {
        $('[data-toggle=popover]').each(function () {
            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;
            }
        });
    });

Bootstrap 4 使用 _activeTrigger 而不是 inState：

$(e.target).data("bs.popover")._activeTrigger.click = false

【讨论】：

这里的“inState”是什么？
inState 告诉弹出框的当前状态。在这里，我们使用“inState.click=false”重置弹出框点击状态，否则我们使用点击事件显示此弹出框，否则该状态将是“true”。 'inState.hover' 'inState.focus' 是一些可用的选项。
如果您觉得这很有用，请投票。 Vivekraj K R

【解决方案6】：

即使我有这个问题..我能够摆脱它..

只需在您的代码中添加这一行.. :

 $(this).css('display', 'none');

即

    $('[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');
          $('[data-toggle="popover"]').css('display','none');
        }
    });
});

建议：你可以使用'document'

来代替'body'标签

【讨论】：

【解决方案7】：

我只是编写了我自己的答案变体，因为我遇到了一个问题，即如果我尝试在单击 ousite 后重新打开一个弹出框，我需要单击该按钮 2 次。

此代码的目标是模拟单击激活弹出框的按钮。

所以有代码：

$('html').on('click', function(e) {
    $('[data-toggle="popover"]').each(function() { //Loop for everything containing a data-toggle="popover"
        if ($(this).attr('aria-describedby') != null ) { //Check if the popover is active / contain an aria-describedby with a value
            var id = $(this).attr('aria-describedby'); //Put the value in a variable
            if (!$(e.target).closest(".popover-content").length && $(e.target).attr("aria-describedby") != id && !$(e.target).closest('[aria-describedby="'+id+'"').length) { //Look if the click is a child of the popover box or if it's the button itself or a child of the button
                $('[aria-describedby="'+id+'"]').trigger( "click" ); //trigger a click as if you clicked the button
            }
        }
    });
});

【讨论】：

这个解决方案几乎可以随时使用。我认为停止传播不能阻止它。问题是，对于您所做的每一次点击，这个函数都会为每个弹出框循环。其他解决方案可能会更好，例如内置解决方案。在某些情况下，您可能会遇到问题，因此这段代码可以完成这项工作。

【解决方案8】：

Bootstrap 无法单独访问 popover id。我们必须阅读与元素相关的 aria- describeby 属性。

下面的代码是删除弹出框：

$("#"+$(relatedElementId).attr("aria-describedby")).remove();

relatedElementId：popover 的关联元素

【讨论】：

【解决方案9】：

实际上我对这段代码很好，因为上面的解决方案都不适合我：

 $('body').on('mouseleave', '.popover', function () {
        $(this).hide();
    });

【讨论】：

是的，它有效。但是当您尝试再次单击 POP OVER 时。它不会工作。

【解决方案10】：

**Try this**,below code is work for me,
Put below code in js file

$(function () {
    $('[data-toggle="popover"]').popover();
});
$('html').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
           if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

and HTML tag should be like this

<a data-toggle="popover"   data-placement="bottom" data-content-id="notifications-content">

【讨论】：