Question

使用bootstrap popover，现在我试图让这个代码在popover外面点击以关闭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('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

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

这几乎与你的代码相同......

Answer 2

事实上，你甚至不需要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>

Answer 3

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

只需在代码中添加此行..：

＆＃13;

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

＆＃13;

即

＆＃13;

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

建议：您可以使用＆＃39;文档＆＃39; ＆＃39; body＆＃39; 标记p>

Answer 4

我只是编写我自己的答案变体，因为我遇到了一个问题，如果我尝试在点击之后重新打开一个弹出窗口，我需要单击该按钮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
            }
        }
    });
});

Answer 5

尝试一下。单击弹出窗口的外部时，它将关闭弹出窗口。

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

Answer 6

只需添加此元素即可在下次点击时关闭弹出窗口。

data-trigger="focus"

此处参考： Bootstrap Popover

Answer 7

Bootstrap 无法独立访问弹出窗口 ID。我们必须读取与元素相关的 aria-describedby 属性。

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

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

relatedElementId：popover 的关联元素

Answer 8

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

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

Answer 9

仅隐藏弹出窗口是行不通的。您将需要单击两次以再次显示弹出窗口。 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;
            }
        });
    });

引导程序4使用_activeTrigger而不是inState：

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

Answer 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">

Bootstrap popover，隐藏在外面点击？

10 个答案: