How To Identify When A Click Is Made Outside The Popup Window?

I have a popup window which disappears on click inside, but my purpose is to make it disappear on click outside. At the moment the popup works fine but it disappears whenever I cli

Solution 1:

Your question can be interpreted as "how to identify when the click is made outside the popup window"?

as suggested here, you can work by difference, checking that the click occurred anywhere but the popup window (and eventually some other elements)

This can be achieved as follows:

the HTML code may be something like:

<divid="popup"class="popup"> 
    Content
    <div>DIV inside</div></div><buttonid="open">Open</button>

while the javascript is:

 $(document).ready(function () {
     $('#popup').hide()
 });

 $('#open').on('click', function () {
     $('#popup').show(500)
 });

 $(document).mouseup(function (e) {
     var popup = $("#popup");
     if (!$('#open').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
         popup.hide(500);
     }
 });

Full example with some CSS-styling: http://jsfiddle.net/sLdmxda8/2/

Solution 2:

I figured it out with the following code!

$(document).ready(function () {
$('.messagepop').hide()
});


$('.invite_room_btn').on('click', function () {
    if($(this).hasClass("selected")) {
        var popup = $(".messagepop");
        popup.hide(150);
        $(".invite_room_btn").removeClass("selected");
    }
    else {
        $('.messagepop').show(150);
        $('.invite_room_btn').addClass("selected");
    }
});

$(document).mouseup(function (e) {
    var popup = $(".messagepop");
    if (!$('.invite_room_btn').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
        popup.hide(150);
 }
});

Thanks for the help!