This blog shows how to make page overlay using stylesheet. This is a very basic and important when work on web application or html pages.
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- #overlay {
- position: fixed;
- display: none;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0,0,0,0.5);
- z-index: 2;
- cursor: pointer;
- }
- </style>
- </head>
- <body>
- <div id="overlay" onclick="RemoveOverlay()"></div>
- <div style="padding:20px">
- <h2>Test Sample</h2>
- <p>‘Baahubali 2: The Conclusion’ worldwide Box-office collection Day 3: Film zooms past the 500-crore mark</p>
- <button onclick="ApplyOverlay()">Make Page Overlay</button>
- </div>
- <script>
- function ApplyOverlay() {
- document.getElementById("overlay").style.display = "block";
- }
- function RemoveOverlay() {
- document.getElementById("overlay").style.display = "none";
- }
- </script>
- </body>
- </html>
See result.
Click on button to make overlay.