Closing Modal Popup by Clicking Away from It

Question

I am using this tutorial to add a modal screen:

http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

Everything works great except closing it. Rather than closing it via a button, I want to give the user the option to close it by clicking outside of the modal, i.e. in the background of the rest of the page behind it.

A user told me to add onclick='overlay()' to the overlay div like this <div id="overlay" onclick='overlay()'>

When I try to close the modal by clicking outside if it, it works, but it also closes if you click on the actual modal itself, which I don't want as it is a registration form. So is there any way to only close the modal by clicking outside of the actual modal itself?

Answer 1

Try this:

$(document).ready(function(){
$('#overlay').bind('click', function(event){
    if (event.target == $('#overlay').get(0))
        overlay(); 
});

Answer 2

You will have to move the code of the the overlay from the modal window. Separating this, you will not have the overlay as a parent of the window and the click event will trigger only on the overlay.

<div id="overlay"> </div>
<div id="modalWindow">
    <p>Content you want the user to see goes here.</p>
</div>