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'); 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>

JavaScript Videos

General Programming

JavaScript Arguments Object Function TutorialJavaScript Storage Interface sessionStorage localStorage TutorialMulti Column Layout Grid Programming TutorialCustom Alert Box Programming TutorialCustom Confirm Box Programming TutorialCustom Prompt Box Programming TutorialChange CSS Class Style className Toggle TutorialPartial Print Document Tutorial HTML div ContentClick Outside Close Menu Box TutorialPercent Math Calculations Programming TutorialDual Image Reveal Control TutorialPage Loading Screen Document Preloader TutorialControl Panel Flyout Menu Windows AnimationsCustom Data Attributes HTML JavaScript CSS TutorialFullscreen API JavaScript Code Examples and SpecificationConsole Log Tutorial Chrome Firefox IE BrowsersToggle Function Click Drop Down Menus TutorialChange Tab Text and Window Title On The Fly TutorialDice Roll Programming Tutorial For Web Browser GamesDynamic Lorem Ipsum Placeholder Text TutorialBest HTML Event Handling addEventListener TutorialsetAttribute removeAttribute Methods TutorialDisabled User Handling Redirect WebsiteCapture Keyboard Input Tutorial HTML ApplicationCapture Keyboard Input Condition Logic TutorialChange Style Sheet Using Tutorial CSS Swap StylesheetWeb Page Overlay Tutorial Transparent CoverLights Out For Earth Day Tutorial Dark Page SwitchWindow Size Responsive CSS Layout Stylesheet Change TutorialRead Mouse Coordinates Pointer Position Tutorial
Top of Page
Home Page
Table of Contents
Donate / Support
Web Hosting
Terms of Use

© 2015 All Rights Reserved