jQuery 在外部单击时关闭弹出 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19092433/
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
Close popup div when clicked outside
提问by Manu
I have a popup div that shows only when clicked on particular button. It even hides when clicked on the same button. My problem is, i also want to hide div when clicked anywhere outside. I am not able to do so because the popup div is inside the main wrapper class and can't do so by using click event on the wrapper class and making it hide. This is my code:
我有一个弹出式 div，仅在单击特定按钮时显示。单击同一按钮时它甚至会隐藏。我的问题是，我也想在点击外面的任何地方时隐藏 div。我无法这样做，因为弹出 div 位于主包装类内部，并且无法通过在包装类上使用 click 事件并将其隐藏来做到这一点。这是我的代码：
function showHide() {
var ele = document.getElementById("div_fieldWorkers");
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
<input type="button" value="Add Field Worker" id="btnFieldWorkers" onclick="return showHide();" class="btn btn-primary" />
采纳答案by Vishal Vaishya
Check this out: http://jsfiddle.net/d4SsZ/1/
看看这个：http: //jsfiddle.net/d4SsZ/1/
Revised: http://jsfiddle.net/d4SsZ/3/
修订：http: //jsfiddle.net/d4SsZ/3/
Just a snippet: Validate for null and undefined js errors if any.
只是一个片段：验证 null 和未定义的 js 错误（如果有）。
Markup:
标记：
<div id="div_fieldWorkers" class="form_size" style='display:none;' class='noclick'><span class='noclick'>Hello How are you?</span></div>
<input
type="button"
value="Add Field Worker"
id="btnFieldWorkers"
class="btn btn-primary" />
Javascript:
Javascript：
$('#btnFieldWorkers').bind("click", ToggleDisplay);
function ToggleDisplay() {
if ($("#div_fieldWorkers").data('shown'))
hide();
else
display();
}
function display() {
if ($("#div_fieldWorkers").children().length > 0) {
$("#div_fieldWorkers").fadeIn(500, function() {
$(document).bind("click", function() {hide(); });
$("#div_fieldWorkers").data('shown', true)});
}
}
function hide() {
if (window.event.toElement.className != 'noclick') {
$("#div_fieldWorkers").fadeOut(500, function() {
$(document).unbind("click");
$("#div_fieldWorkers").data('shown', false);
});
}
}
回答by Waseem Khan
Had the same problem, came up with this easy solution. It's even working recursive:
有同样的问题，想出了这个简单的解决方案。它甚至可以递归工作：
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
回答by lort
The solution to this problem is here: Use jQuery to hide a DIV when the user clicks outside of it
这个问题的解决方案在这里： 当用户在 DIV 外部单击时，使用 jQuery 隐藏它
Also, you tagged this question jquery, but your code is pure javascript. When using jQuery, you can write only
此外，您标记了这个问题jquery，但您的代码是纯 javascript。使用jQuery时，你只能写
$('#div_fieldWorkers').toggle();
in your onclick.
在您的onclick 中。
回答by Dvir
Create click event on body element and stopPropagation. this makes the event to call the click event only on the button. Then check that the click target element isn't the popup div. example:
在 body 元素和 stopPropagation 上创建单击事件。这使得事件只在按钮上调用点击事件。然后检查单击目标元素是否不是弹出 div。例子：
$(function(){
$("#btnFieldWorkers").click(function(e){
e.stopPropagation();
$("#div_fieldWorkers").show();
$("body").click(function(e){
if(e.target.id != "div_fieldWorkers")
{
$("#div_fieldWorkers").hide();
$("body").unbind("click");
}
});
});
});
回答by user5119520
You can also hide the pop up by click on pop up div.For this you have to provide click function in the div tag.In that click function you have to write the close pop up functionality.
您还可以通过单击弹出 div 来隐藏弹出窗口。为此，您必须在 div 标签中提供单击功能。在该单击功能中，您必须编写关闭弹出功能。
