Web Page Overlay Tutorial Transparent Cover

Published :
Author :
Adam Khoury
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'); overlay.style.opacity = .8; if(overlay.style.display == "block"){ overlay.style.display = "none"; specialBox.style.display = "none"; } else { overlay.style.display = "block"; specialBox.style.display = "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>