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