Close popup div when clicked outside

Question

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:

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

Answer 1

The solution to this problem is here: Use jQuery to hide a DIV when the user clicks outside of it

Also, you tagged this question jquery , but your code is pure javascript. When using jQuery, you can write only

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

in your onclick .

Answer 2

Check this out: http://jsfiddle.net/d4SsZ/1/

Revised: http://jsfiddle.net/d4SsZ/3/

Just a snippet: Validate for null and undefined js errors if any.

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:

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

Answer 3

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

Answer 4

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:

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

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

Answer 6

您还可以通过单击弹出 div 来隐藏弹出窗口。为此，您必须在 div 标签中提供单击功能。在该单击功能中，您必须编写关闭弹出功能。