CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Al Hennessey
Al Hennessey

Reputation: 2445

Close Modal Dialog Screen

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

Upvotes: 0

Views: 367

Answers (1)

Colin Brock
Colin Brock

Reputation: 21565

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.

Upvotes: 1

Related Questions