Jquery, how: click anywhere outside of the div, the div fades out

Question

In Jquery how would i make it so that if i had a div, with different elements inside of it, a select, a search input, etc, that when i click outside of the div, on the page, the div fades out, but i can click on the select and type in the search input and not have it fade? any help is appreciated. -nick

score 25 · Accepted Answer · answered Jan 23 '10 at 23:12

25

Code Duck's answer is incomplete, because you'd need to have it not fade out if you click the DIV itself (only outside). So say your DIV that's supposed to fade out has an ID of "menu".

jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });

The use of one is more concise than the bind/unbind. Also namespaced events aren't really needed here if you use one because there's no need to explicitly unbind a particular click handler on document.

The return false is just saying "stop bubbling this event up to the document."

answered Jan 23 '10 at 23:12

jpsimons

27,382
3
35
45

nice, works great! but isn't there a better way than to check each time the user clicks the document? so if i randomly click everywhere on the screen, that's firing the function, isn't it? maybe it's early but i don't understand how your code works, but it does.... mmmmmm – ExodusNicholas Jan 25 '10 at 19:11
2

No, when you open the menu you call this code. "One" means it fires once then unbinds itself. After the menu closes click all you want all over the place and nothing is bound or gets called. – jpsimons Jan 26 '10 at 00:05
Hey man, i had this working, and then my hard drive crashed and i lost everything. I'm trying to re-build it but whatever i did with this code isn't working now, should this be the final code? $(document).click(function(){ jQuery("#menu").click(function(){ return false; }); jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); }); }) it works the first time i click anything but the DIV itself, but the second time that i do that, it wont fade out – ExodusNicholas Feb 09 '10 at 18:35
Yeah, that code I posted needs to run every time you open the div. So like `var d = openSomeDiv(); d.click(...); jQuery(document).click(...);` – jpsimons Feb 11 '10 at 23:16
2

A more idiomatic jQuery way to do this would be to do jQuery("#menu").click(function(ev){ ev.stopPropagation(); }); – JAL May 29 '11 at 05:46

score 3 · Answer 2 · answered Jan 23 '10 at 21:03

Many modal dialogs use an partially transparent overlay that covers the entire page indicating that the dialog has focus. I would consider this the best way to accomplish what you want. If you really don't want the page darkened or grayed out, you can always just make the overlay completely transparent. For an example check out Facebox.

score 3 · Answer 3 · answered Jul 13 '10 at 06:44

I know this is an older question, but here's an extension I wrote to add a clickOutside function to elements:

$.fn.extend({
// Calls the handler function if the user has clicked outside the object (and not on any of the exceptions)
clickOutside: function(handler, exceptions) {
    var $this = this;

    $("body").bind("click", function(event) {
        if (exceptions && $.inArray(event.target, exceptions) > -1) {
            return;
        } else if ($.contains($this[0], event.target)) {
            return;
        } else {
            handler(event, $this);
        }
    });

    return this;
}

}

With this you could easily do

$("#menu").clickOutside(function(event, obj) { obj.fadeOut() });

score 2 · Answer 4 · edited Dec 07 '11 at 15:51

2

$("#menu").click(function(){
        $(document).unbind("click");
        $("#menu").show();
        $("#menu").bind('mouseout',function(){
        $(document).bind("click",function(){$("#menu").fadeOut();});
        });
});

This should do.. cheers.

edited Dec 07 '11 at 15:51

John Conde

217,595
99
455
496

answered Dec 07 '11 at 15:49

Mithun Karmakar

21
1

score 0 · Answer 5 · answered Feb 27 '14 at 06:46

0

Check this out
Demo is here

$('#menuBtn').click(function(e) {
    e.stopPropagation();
    $('.navMenuSecWrapper').fadeToggle();
    return false;
});

$(document).click(function() {
    $('.navMenuSecWrapper').fadeOut();
});

answered Feb 27 '14 at 06:46

Suresh Pattu

6,083
16
59
91

JAL · Answer 6 · 2010-01-23T23:12:46.057

-1

You can bind a click handler on $(document) like

$(document).click(function(){
  $(this).unbind('click');
  $('#menu').fadeOut();
  }

edited Jan 23 '10 at 23:12

answered Jan 23 '10 at 21:04

JAL

21,295
1
48
66

I haven't done much with bind. is your code saying that if you click an element with the class of "close_menu" that "#menu" will fade out? I don't want the user to have to click a close button or anything like that, i just want it to fade if the user clicks outside of that div. – ExodusNicholas Jan 23 '10 at 21:42
The click.close_menu is not about a css class; it's a named bind. I could have just put 'click' there, or used the .click method. I'll edit it to make it more clear. The click is being bound to the whole document. – JAL Jan 23 '10 at 23:12
wouldn't that fadeout the menu, even if i clicked on the menu itself? – ExodusNicholas Jan 25 '10 at 18:49
Yeah, I wasn't feeling very with it that day. This came from a project where I built a dropdown menu, so it was supposed to close as soon as you clicked the menu, or outside the menu. Worked for us, probably not for what you were asking. I very much recommend Dark Porter's answer. It's what I was getting at, but fixed. – JAL Jan 25 '10 at 18:58
Actually, it wouldn't fade out with a click on the menu if you put an ev.stopPropagation() on the menu element. – JAL May 29 '11 at 05:45

Jquery, how: click anywhere outside of the div, the div fades out

6 Answers6

Linked