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