jQuery hide when clicked on anything but div

Question

I've tried the answers to the similair questions of this without success.

In this jsfiddle: http://jsfiddle.net/h2HzN/6/

I have it set up that when you press escape it goes away using this:

$(document).keyup(function(e) {
    if (e.keyCode == 27) {
        $("#signup").fadeOut(250);
        $("#window").slideUp(450);
    }
});

but I also want it go away when you click anywhere but the black box. Thanks in advance.

Rory McCrossan · Answer 1 · 2014-05-18T14:26:05.043

1

Try this:

$(document).keyup(function (e) {
    if (e.keyCode == 27) {
        removeMessage();
    }
}).click(function (e) {
    if ($(e.target).closest('#window').length == 0 || $(e.target).prop('id') != 'window') {
        removeMessage();
    }
});

function removeMessage() {
    $("#signup").fadeOut(250);
    $("#window").slideUp(450);
}

Example fiddle

Note that checking for the closest #window element means that this code will work for any child element within the #window.

edited May 18 '14 at 14:26

answered May 18 '14 at 14:16

Rory McCrossan

331,213
40
305
339

Ah very nice. What I forgot to add in the jsfiddle though is that the window appears when you click on something. When i add your solution it immediatly hides it again. See here : http://jsfiddle.net/h2HzN/6/ – jeboysteven May 18 '14 at 14:24
@user3621590 you need to add a class to the button which makes the messagebox appear, and then add a condition to the `if` which excludes clicks from that class. – Rory McCrossan May 18 '14 at 14:27
1

@RoryMcCrossan +1, also, I modified a bit your solution... http://jsfiddle.net/h2HzN/8/ – Roko C. Buljan May 18 '14 at 14:33
@RokoC.Buljan very nice, much tidier. I'd +1 if I could :) – Rory McCrossan May 18 '14 at 14:36
I just have an issue if you add an inner element inside `#window` :| which happens also in your example so... might need for a fix – Roko C. Buljan May 18 '14 at 14:36
what about this one? http://jsfiddle.net/xibalbian/8P6gH/ It only fades out when Esc used or clicked anywhere but the black box and the sign up button – Ekin May 18 '14 at 14:41
@EkinHazal nice, but the `if(this.id !== "popup")` is too restrictive. In a larger project you might have more than one button to open a popup... :| – Roko C. Buljan May 18 '14 at 14:50
For sure @RokoC.Buljan, yet for this question looks like it's enough. But yes, I'm actually trying to find a better way because of that. I might need to use it. – Ekin May 18 '14 at 14:54

Ekin · Accepted Answer · 2014-05-18T14:40:14.123

This should do that DEMO

$(window).click(function() {
  if(this.id !== "window") {
    $("#signup").fadeOut(250);
    $("#window").slideUp(450);
  }
});

$("#window").on("click", function(e){
   e.stopPropagation();
});

For the latest fiddle you've provided,

MODIFIED FIDDLE

Latest solution for me,

$("#popup").add("#signup_signin a").click(function(e) {
   $("#signup").fadeIn(400);
   $("#window").slideDown(450);
   e.stopPropagation();
});

$(document).keyup(function(e) {
    if (e.keyCode == 27) {
       $("#signup").fadeOut(250);
       $("#window").slideUp(450);
    }
});

$(window).click(function() {
    if(this.id !== "popup") {
      $("#signup").fadeOut(250);
      $("#window").slideUp(450);
    }
});

$("#window").on("click", function(e){
   e.stopPropagation();
});

It only fades out when Esc used or clicked anywhere but the black box and the sign up button.

Ehsan Sajjad · Answer 3 · 2014-05-18T14:23:19.277

0

you can do this way:

   $("div #window").click(function(e){


    return false;


});

$(document.body).click(function(){


        $("#signup").fadeOut(250);
        $("#window").slideUp(450);


})

Fiddle DEMO

edited May 18 '14 at 14:23

answered May 18 '14 at 14:15

Ehsan Sajjad

61,834
16
105
160

score 0 · Answer 4 · answered May 18 '14 at 14:20

Option 1:

$("#window").on("click", function (e) {
    //stop propagation so that it's not handled in document root.
    e.stopPropagation();
});

//if not stopped by window i.e. not clicked on #window then handle and hide.
$(document).on("click", function (e) {
    $("#signup").fadeOut(250);
    $("#window").slideUp(450);
});

Option 2:

$(document).on("click", function (e) {
    if(e.target.id === 'window') return;

    $("#signup").fadeOut(250);
    $("#window").slideUp(450);
});

score 0 · Answer 5 · answered May 18 '14 at 14:20

Use stopPropagation():

http://jsfiddle.net/h2HzN/4/

$(document).keyup(function(e) {
    if (e.keyCode == 27) {
        $("#signup").fadeOut(250);
        $("#window").slideUp(450);
    }
}).click(function(){
    $("#signup").fadeOut(250);
    $("#window").slideUp(450); 
});
//if you click within #window, the document.click will not trigger.
$("#window").on("click", function(e){
    e.stopPropagation();
});

jQuery hide when clicked on anything but div

5 Answers5