Make page overlay using styles

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. 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #overlay {  
  6.     position: fixed;  
  7.     display: none;  
  8.     width: 100%;  
  9.     height: 100%;  
  10.     top: 0;  
  11.     left: 0;  
  12.     right: 0;  
  13.     bottom: 0;  
  14.     background-color: rgba(0,0,0,0.5);  
  15.     z-index: 2;  
  16.     cursor: pointer;  
  17. }  
  18. </style>  
  19. </head>  
  20. <body>  
  21. <div id="overlay" onclick="RemoveOverlay()"></div>  
  22. <div style="padding:20px">  
  23.   <h2>Test Sample</h2>  
  24.   <p>‘Baahubali 2: The Conclusion’ worldwide Box-office collection Day 3: Film zooms past the 500-crore mark</p>  
  25.   <button onclick="ApplyOverlay()">Make Page Overlay</button>  
  26. </div>  
  27. <script>  
  28. function ApplyOverlay() {  
  29.     document.getElementById("overlay").style.display = "block";  
  30. }  
  31. function RemoveOverlay() {  
  32.     document.getElementById("overlay").style.display = "none";  
  33. }  
  34. </script>       
  35. </body>  
  36. </html>  
See result.
 
Click on button to make overlay.
 
 
 
 
Next Recommended Reading
Importance of Form Tag in HTML Page