Question

This is what I’ve done:

$('#keks-overlay').hide();  

$('#click').click(function(){
    $('#keks-overlay').toggle(450);
});

$('#close-overlay').click(function(){
    $('#keks-overlay').toggle(250);
});

​
jsFiddle: http://jsfiddle.net/rHKkD/22/

This works fine, but it shows/hides (toggles) only by clicking the “X” (#close-overlay).

I’d like do something like the fancybox-effect: fade out on clicking anywhere on the whole body.

Thanks for your help.

Answer 1

You can add an event handler to a div that contains the whole page (or the document itself), and hide() the overlay in that handler.

$("#somebody").click(function() {
    $('#keks-overlay').hide(250);
});

However, if you want to prevent clicks on the overlay itself from triggering the hide(), you could either add an event handler to the overlay that returns false (to prevent the event from bubbling up), or place the overlay outside the div that holds the rest of your content (which works because the overlay has absolute positioning).

I updated your fiddle to show the second method.