<!--To create an overlay in HTML, follow these steps:

Step 1: Add HTML - Create a div with an id. -->

​

<div id="overlay"></div>

​

<!-- Step 2: Add CSS - Style that div -->

​

<style>

  #overlay {

  position: fixed; /* Sit on top of the page content */

  display: none; /* Hidden by default */

  width: 100%; /* Full width (cover the whole page) */

  height: 100%; /* Full height (cover the whole page) */

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: rgba(0,0,0,0.5); /* Black background with opacity */

  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */

  cursor: pointer; /* Add a pointer on hover */

}

</style>

​

​

<!-- Step 3: Add Javascript - to turn the overlay on and off -->

​

<script>

  function on() {

    document.getElementById("overlay").style.display = "block";

  }

​

  function off() {

    document.getElementById("overlay").style.display = "none";

  }

</script>