Web Development Training System

Web Page Overlay Tutorial Transparent Cover

Learn two different ways of applying overlays and transparent covers to your page data. It is most commonly used to bring a special new window to the user's attention while the page they are on fades back temporarily. <!DOCTYPE html> <html> <head> <style> div#overlay { display: none; z-index: 2; background: #000; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; } div#specialBox { display: none; position: relative; z-index: 3; margin: 150px auto 0px auto; width: 500px; height: 300px; background: #FFF; color: #000; } div#wrapper { position:absolute; top: 0px; left: 0px; padding-left:24px; } </style> <script> function toggleOverlay(){ var overlay = document.getElementById('overlay'); var specialBox = document.getElementById('specialBox'); = .8; if( == "block"){ = "none"; = "none"; } else { = "block"; = "block"; } } </script> </head> <body> <!-- Start Overlay --> <div id="overlay"></div> <!-- End Overlay --> <!-- Start Special Centered Box --> <div id="specialBox"> <p>Special box content ...</p> <button onmousedown="toggleOverlay()">Close Overlay</button> </div> <!-- End Special Centered Box --> <!-- Start Normal Page Content --> <div id="wrapper"> <h2>My web page heading</h2> <p>Some web page content ...</p> <button onmousedown="toggleOverlay()">Apply Overlay</button> </div> <!-- End Normal Page Content --> </body> </html>