CSS & JavaScript: Modal Dialog

Hi!
These are just simple snippets of codes that will allow us to create a modal dialog box.

HTML

<div id="overlay">
    <div>
        <p>I am a hidden div and will be displayed as a modal!</p>
        <p>Charlungs!</p>
    </div>
</div>
<button onclick='overlay()'>Click</button>

CSS

#overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 1000;
    background:url('http://jasongraphix.com/static/uploads/googlebg-dadada.png');
    /** replace background image with a transparent gray image **/
}
#overlay>div {
    width:300px;
    margin: 100px auto;
    background-color: fff;
    border:3px solid #000;
    padding:15px;
    text-align:center;
}

Javascript

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

FIDDLE

Better ideas? Leave a message on the comments section.

Credits to:

• RAVEN Blog