How to close DIV, when clicked anywhere on the document/body?

[Geeksquad]

Hello,
I am a novice to JavaScript and jQuery so assistance is definitely needed... I basically have a few overlays that appear once a user clicks on a link within the page. You can close the overlay by clicking on the "X" link within the DIV, however I'd like for user's to be able to close the DIV by clicking anywhere on the screen. I'm sure its possible, yet I'm having a challenge implementing this functionality.

Any help on this would be greatly appreciated!! Thanks.

GS

[LearningCoder]

Can you post what code you have so far please?

Regards,

LC.

[xatm]

For example:

$("body").click(function(event){

if($(event.target).is('your modal window id')) {
return false;
}

//hide or close the overlay+modal function here

});

As an explanation:

The first function executes when anything gets clicked, if you have it set up like
<overlay> <- darker fullscreen background
<modal></modal> <- your little modal window
</overlay>

You can replace "body" in the first function with your "overlay" object.

It then checks if the clicked element is your modal window, if it is, do nothing. This prevents your whole overlay from closing/hiding if the visitor clicks on your modal window.

After that simply insert a function that hides or deletes your overlay! Hope this helped!