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

Answer 1

Try this library http://flowplayer.org/tools/expose.html

Answer 2

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.

Answer 3

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

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

Answer 4

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

Answer 5

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