Bootstrap popover，隐藏在外部？|jquery问答

使用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

我发现了这个：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');
        }
    });
});

与您几乎相同的代码...

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

data-trigger="focus"

从这里参考：
Bootstrap Popover

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

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

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

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

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

只需在您的代码中添加此行即可：

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

建议：您可以使用“文档”代替“ body”标签

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

此代码的目的是模拟单击按钮以激活弹出窗口。

所以有代码：

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

Bootstrap无法独立地到达Popover ID。我们必须阅读与元素相关的aria- describeby属性。

下面的代码是删除弹出窗口：

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

relatedElementId：弹出框的关联元素

实际上，我对这段代码感到满意，因为上述解决方案都不适合我：

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

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

本文地址：http://jquery.askforanswer.com/bootstrap-popoveryincangzaiwaibu.html
文章标签：jquery , twitter-bootstrap
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！

文件下载