CODEWITHSUNDEEP
javascriptjquery
Manu
Manu

Reputation: 418

Close popup div when clicked outside

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

Upvotes: 3

Views: 29235

Answers (6)

Artur INTECH
Artur INTECH

Reputation: 7266

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

Upvotes: 0

user5119520
user5119520

Reputation: 1

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.

Upvotes: -1

Waseem Khan
Waseem Khan

Reputation: 127

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

Upvotes: 1

Vishal Vaishya
Vishal Vaishya

Reputation: 616

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

Upvotes: 1

Dvir
Dvir

Reputation: 3339

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

Upvotes: 0

lort
lort

Reputation: 1457

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.

Upvotes: 1

Related Questions