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

this div contains a form to be filled by the user but it is in the main wrapper class. — Manu, Sep 30 '13 at 11:05

score 1 · Answer 1 · edited May 23 '17 at 11:54

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.

edited May 23 '17 at 11:54

Community

1
1

answered Sep 30 '13 at 11:06

lort

1,458
12
16

yeah.. but it didn't work with this code. problem is that the popup div is inside the main wrapper class. Whenever i fire click event outside the div(i.e. on wrapper class) to hide it, it doesn't work at all. It gives priority to the wrapper class click event and thus the div always remain hidden. – Manu Sep 30 '13 at 11:16

Vishal Vaishya · Accepted Answer · 2013-09-30T13:22:17.063

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

when i click inside the div.. it gets hidden.. i want if the user clicks inside the div.. it doesnot hide itself — Manu, Sep 30 '13 at 11:33
@user2829939 Check this http://jsfiddle.net/d4SsZ/3/ Just added class as noclick and onhide skipped the click event. There may be a good approach than this. For time being: it will work for you. — Vishal Vaishya, Sep 30 '13 at 13:12

score 1 · Answer 3 · answered Jun 25 '15 at 05:04

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

score 0 · Answer 4 · answered Sep 30 '13 at 11:06

0

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

answered Sep 30 '13 at 11:06

Dvir

3,287
1
21
33

when i click inside the div.. it gets hidden.. i want if the user clicks inside the div.. it doesnot hide itself as it contains a form to be filled by the user – Manu Sep 30 '13 at 11:50
see the jsFiddle link. It's not supposed to disappear it. show me your code – Dvir Sep 30 '13 at 14:46

score 0 · Answer 5 · answered Dec 30 '20 at 17:57

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

user5119520 · Answer 6 · 2015-07-15T13:11:58.577

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

edited Jul 15 '15 at 13:11

answered Jul 15 '15 at 13:05

user5119520

1
1

Didn't the OP explicitly state that this was not a desired solution? – Hannes Johansson Jul 15 '15 at 13:10

Close popup div when clicked outside

6 Answers6

Linked