jQuery：如果在其他地方检测到点击，则隐藏弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2329816/
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
jQuery: Hide popup if click detected elsewhere
提问by adamyonk
I'm trying to hide a div if the user clicks anywhere BUT the popup OR its children. This is the code I have so far:
如果用户单击弹出窗口或其子项以外的任何位置，我将尝试隐藏 div。这是我到目前为止的代码：
$("body").click(function(){
var $target = $(event.target);
if(!$target.is(".popup") || !$target.is(".popup").children()){
$("body").find(".popup").fadeOut().removeClass('active');
}
});
This works for the .popup div, but if any of its children are clicked, it hides it anyway.
这适用于 .popup div，但如果单击它的任何子项，它无论如何都会隐藏它。
回答by Sampson
You really could simplify this a bit I think:
我认为你真的可以简化一下：
// If an event gets to the body
$("body").click(function(){
$(".popup").fadeOut().removeClass("active");
});
// Prevent events from getting pass .popup
$(".popup").click(function(e){
e.stopPropagation();
});
Clicking on the popup, or any of its children will cause propagation to stop before it reaches the body.
单击弹出窗口或其任何子项将导致传播在到达正文之前停止。
Demo of stopping event-propagation: http://jsbin.com/ofeso3/edit
停止事件传播的演示：http: //jsbin.com/ofeso3/edit
回答by Vishnu Choudhary
I am using a very simple code for this as :-
我为此使用了一个非常简单的代码：-
$(document).click(function(e){
if($(e.target).closest('#popupdivID').length != 0) return false;
$('#popupdivID').hide();
});
this is also useful for dropdown menu. if you have click on dropdown menu and viewing the list and then click on elsewhere in the document then that dropdown should be closed. I have used same code for that also.
这对于下拉菜单也很有用。如果您单击下拉菜单并查看列表，然后单击文档中的其他地方，则应关闭该下拉菜单。我也为此使用了相同的代码。
Thanks!!
谢谢！！
回答by ghoppe
Brush up on your boolean logic! :)
复习一下你的布尔逻辑！:)
if(!$target.is(".popup") && !$target.parents().is(".popup"))
回答by Benjamin Crouzier
Do this:
做这个：
$(document).click(function (e) {
// show_alerts is the class of the link to display the popup
if (!$(e.target).parents().andSelf().is('.show_alerts')) {
// hide your popup
}
});
example: http://jsfiddle.net/Acf3F/
回答by jchavannes
Here's a potential solution for certain situations. The popup must have tabindex set for this to work and cannot have any "focusable" elements inside.
这是针对某些情况的潜在解决方案。弹出窗口必须设置 tabindex 才能工作，并且里面不能有任何“可聚焦”元素。
$('a').click(function() {
$('.popup').show().focus();
});
$('.popup').blur(function() {
$(this).hide();
});
回答by Craig Poole
I had issues with all of the solutions here, so after some frustration; I approached the problem from a slightly different direction.
我对这里的所有解决方案都有问题，所以在经历了一些挫折之后；我从一个稍微不同的方向解决了这个问题。
I specifically didn't like attaching click events to the body or document and event.target wasn't reliable enough. I also didn't want to use stopPropagation() as I didn't want to interfere with other events.
我特别不喜欢将点击事件附加到正文或文档，并且 event.target 不够可靠。我也不想使用 stopPropagation() 因为我不想干扰其他事件。
Here's how I solved it, hope it helps:
我是这样解决的，希望能帮到你：
Markup
标记
<div id="ModalBG"></div>
<div id="Modal">Content Here</div>
JavaScript
JavaScript
function showModal(){ $("#Modal, #ModalBG").show(); }
$("#ModalBG").click(function () { $("#Modal, #ModalBG").hide() });
CSS
CSS
#Modal{
z-index: 99;
}
#ModalBG{
opacity: 0;
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 98;
display: none;
}
回答by Abdul Rehman
Here is the code snippet which may help for a html structure
这是可能有助于 html 结构的代码片段
<script>
jQuery(document).click(function() {
jQuery(".main-div-class .content").css("display","none");
});
jQuery(".main-div-class .content").click(function (e) {
e.stopPropagation();
//do redirect or any other action on the content
});
jQuery(".main-div-class h4").click(function(e) {
e.stopPropagation();
jQuery(this).parent().find(".content").show();
});
</script>
<div class="main-div-class">
<h4>click here</h4>
<div class='content'>to show content here like this "<a href="http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere#new-answer">Click</a>" or any other type of content</div>
</div>
回答by Abdul Rehman
so updated code may be like this
所以更新的代码可能是这样的
<script type="text/javascript">
jQuery(document).ready(function(e) {
jQuery(document).click(function() {
jQuery(".main-div-class .content").css("display","none");
});
jQuery(".main-div-class .content").click(function (e) {
e.stopPropagation();
//do redirect or any other action on the content
});
jQuery(".main-div-class h4").click(function(e) {
e.stopPropagation();
jQuery(this).parent().find(".content").show();
});
});
</script>
<div class="main-div-class">
<h4>click here</h4>
<div class='content'>to show content here like this "<a href="http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere#new-answer">Click</a>" or any other type of content</div>
</div>
回答by grosser
We are using this to show a popup on click and then hide it once you click the same button again or click outside.
我们正在使用它来在单击时显示弹出窗口，然后在您再次单击同一按钮或单击外部时隐藏它。
function togglePopup(){
var selector = '#popup',
$popup = $(selector),
callback = function(e) {
if (!$(e.target).parents().andSelf().is(selector)) {
$popup.hide();
$(document).off('click', callback);
}
};
$popup.toggle();
if ($popup.is(':visible')) {
$(document).on('click', callback);
}
return false;
}
回答by Stane
$("body").click(function(event ){
var $target = $(event.target);
if(!$target.parents().is(".popup") && !$target.is(".popup")){
$("body").find(".popup").hide();
}
});
this is the solution for me
这是我的解决方案
