Question

i am currently implementing a modal dialog screen into my website for the registration page, to save time for you i am not going to lie and say that i am following this tutorial – http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

It all works fine except it does not show how to close the dialog on the user clicking outside of it, like on the rest of the body around it.

How can i do this?

Thanks for your help

Answer 1

You simply need to call overlay() again from whatever event you want to trigger the close. It toggles the visibility of the overlay (if the overlay is visible, calling overlay() hides it and vice versa):

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

You may also consider using something like jQuery UI’s dialog widget.