DIV Overlay

HTML

<div><p>This is the regular content on the screen</p>
    <p><a onclick="document.getElementById('overlay').style.display = 'block';document.getElementById('fade').style.display = 'block'" href="javascript:void(0)">Click here to open the overlay</a></p>
</div>
        <div id="overlay"><span>This is where you will put your inline HTML for the content inside of the overlay</span>
            <a onclick="document.getElementById('overlay').style.display = 'none';
        document.getElementById('fade').style.display = 'none'"
               href="javascript:void(0)">Click here to close the overlay
            </a> </div>
        <div id="fade"></div>

CSS

#overlay {
                display: none; /* ensures it’s invisible until it’s called */
                position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */
                left: 25%; /* positions the div half way horizontally */
                top: 25%; /* positions the div half way vertically */
                padding: 25px; 
                border: 2px solid black;
                background-color: #ffffff;
                width: 50%;
                height: 50%;
                z-index: 100; /* makes the div the top layer, so it’ll lay on top of the other content */
            }
            #fade {
                display: none;  /* ensures it’s invisible until it’s called */
                position: absolute;  /* makes the div go into a position that’s absolute to the browser viewing area */
                left: 0%; /* makes the div span all the way across the viewing area */
                top: 0%; /* makes the div span all the way across the viewing area */
                background-color: black;
                -moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */
                opacity: .70;
                filter: alpha(opacity=70);
                width: 100%;
                height: 100%;
                z-index: 90; /* makes the div the second most top layer, so it’ll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */
            }