Post
Ask Question

Make page overlay using styles

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.
a 
 
Click on the button to make the overlay.
 
c