点击弹出框外部时关闭弹出框

Question

我有一个弹出式div，只有在点击特定按钮时才会显示。甚至当点击同一按钮时，它也会隐藏。我的问题是，我还想在点击外部任何地方时隐藏div。我无法这样做，因为弹出式div在主包装类中，无法使用单击事件在包装类上使其隐藏。 这是我的代码：

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

- Manu

---

请添加弹出窗口的HTML代码和JS代码。 - Mevin Babu

你能分享一下你的标记吗？ - Neikos

<div id="div_fieldWorkers" style="display:none;" class="form_size"></div> 这个 div 包含一个用户需要填写的表单， 但它在主包装类中。 - Manu

包装类在主页面中。 - Manu

Answer 1

我遇到了同样的问题，想出了这个简单的解决方案。它甚至可以进行递归操作：

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

- Waseem Khan

Answer 2

这个问题的解决方案在这里： 使用jQuery在用户点击DIV外部时隐藏它 此外，您标记了这个问题为jquery，但是您的代码是纯JavaScript。在使用jQuery时，您可以只编写

$('#div_fieldWorkers').toggle();

在你的onclick中。

- lort

---

是的...但是这段代码没有生效。 问题在于弹出框(div)在主要的包装类(wrapper class)内部。每当我在div外面(即wrapper class上)触发点击事件以隐藏它时，它根本不起作用。它会优先执行wrapper class的点击事件，因此div始终保持隐藏状态。 - Manu

Answer 3

看这个：http://jsfiddle.net/d4SsZ/1/

修订版：http://jsfiddle.net/d4SsZ/3/

代码片段：验证null和undefined js错误。

标记：

<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：

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

- Vishal Vaishya

---

当我点击 div 里面时，它被隐藏了。我希望如果用户点击 div 内部，它不会隐藏自己。 - Manu

@user2829939 请查看这个链接 http://jsfiddle.net/d4SsZ/3/，我已经添加了一个名为“noclick”的类，并跳过了点击事件的onhide。可能有更好的方法，但暂时这样可以解决问题。 - Vishal Vaishya

Answer 4

在 body 元素上创建点击事件并停止传播。这将使事件仅在按钮上调用点击事件。然后检查点击目标元素是否为弹出窗口 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");
           }
       });
   });

});

jsfiddle

{{链接1：jsfiddle}}

- Dvir

---

当我单击 div 内部时，它会隐藏起来。我希望如果用户在 div 内部单击它自己时，它不会隐藏起来，因为它包含用户要填写的表单。 - Manu

请给我看你的代码。另外，这个jsFiddle链接不应该消失。 - Dvir

Answer 5

document.addEventListener('click', function () {
  document.querySelector('.menu').classList.remove('active');
});

document.querySelector('.toggle-menu-btn').addEventListener('click', function (event) {
  document.querySelector('.menu').classList.toggle('active');
  event.stopPropagation();
});

document.querySelector('.menu').addEventListener('click', function (event) {
  event.stopPropagation();
});

- Artur INTECH

Answer 6

你也可以通过点击弹出层来隐藏它。为此，您必须在div标签中提供click函数。在该click函数中，您需要编写关闭弹出层的功能。

- user5119520

---

OP明确表示这不是期望的解决方案，是吗？ - Hannes Johansson