jQuery Bootstrap 弹出窗口，点击外部时隐藏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20466903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap popover, hide on click outside?
提问by Tommy
using bootstrap popover, and now im trying to get this code to click outside the popover to close the 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');
}
});
});
But when i use this part, i can close the popover but i cant click the other buttons, anyone got any idea how i can do that?
但是当我使用这部分时，我可以关闭弹出窗口但我不能点击其他按钮，有人知道我该怎么做吗？
All the buttons:
所有按钮：
<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
回答by BENARD Patrick
I found this : http://bootply.com/99372
我发现了这个：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');
}
});
});
It's almost the same code as you...
几乎和你一样的代码...
回答by Asiri Jayaweera
Try this. It will close the popover when clicking the outside of the popover.
尝试这个。单击弹出窗口的外部时，它将关闭弹出窗口。
$('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;
}
});
Another solution,
另一种解决方案，
<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>
add tabindex="0"and data-trigger="focus"
添加tabindex="0"和data-trigger="focus"
回答by TheBugger0101
In fact, you don't even need JS, since there's already a setting for this in Bootstrap.
事实上，你甚至不需要 JS，因为在 Bootstrap 中已经有一个设置。
See : http://getbootstrap.com/javascript/#dismiss-on-next-click
请参阅：http: //getbootstrap.com/javascript/#dismiss-on-next-click
"Specific markup required for dismiss-on-next-click
For proper cross-browser and cross-platform behavior, you must use the <a>tag, not the <button>tag, and you also must include the role="button" and tabindex attributes."
“下一次点击关闭所需的特定标记为了正确的跨浏览器和跨平台行为，您必须使用<a>标签，而不是<button>标签，并且您还必须包含 role="button" 和 tabindex 属性。”
Ex. :
前任。：
<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>
回答by Elie Morin
I just code my own variant of your answer, because I got an issue where if I try to reopen a popover after an ousite click, I needed to click the button 2 times.
我只是编写了我自己的答案变体，因为我遇到了一个问题，如果我在单击 ousite 后尝试重新打开弹出窗口，我需要单击按钮 2 次。
The goal of this code is the simulate a click on the button which activate the popover.
这段代码的目标是模拟点击激活弹出框的按钮。
So there is the code :
所以有代码：
$('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
}
}
});
});
回答by SwapNeil
Even i had that problem.. and i am able to get rid off it..
即使我有那个问题..而且我能够摆脱它..
just add this line in your code.. :
只需在您的代码中添加这一行..：
$(this).css('display', 'none');i.e
IE
$('[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');
}
});
});
Suggestion:Instead of 'body'tag you can use 'document'
建议：您可以使用“文档”代替“正文”标签
回答by ravi
Just add this element to close the popover on next click.
只需添加此元素即可在下次单击时关闭弹出窗口。
data-trigger="focus"
Reference from here: Bootstrap Popover
来自这里的参考： Bootstrap Popover
回答by SumitK
Just hiding popover won't work. You will need to click twice to show popover again. https://github.com/twbs/bootstrap/issues/16732
仅仅隐藏弹出框是行不通的。您需要单击两次才能再次显示弹出窗口。 https://github.com/twbs/bootstrap/issues/16732
To make it work correctly for Bootstrap 3.3.6. Try this:
使其在 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 uses _activeTriggerinstead of inState:
Bootstrap 4 使用_activeTrigger代替inState：
$(e.target).data("bs.popover")._activeTrigger.click = false
回答by Sulyman
actually I'm fine with this code because none of the solution above worked for me:
实际上我对这段代码很好，因为上面的解决方案都不适合我：
$('body').on('mouseleave', '.popover', function () {
$(this).hide();
});
回答by Suvarna Ahire
**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">
