<!--- CSS --->

<style>

#text{

  position: absolute;

  top: 50%;

  left: 50%;

  font-size: 50px;

  color: white;

  transform: translate(-50%,-50%);

  -ms-transform: translate(-50%,-50%);

}

#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>

​

<!--- HTML --->

<div id="overlay">

  <div id="text">Overlay Text</div>

</div>

​

<!--- Js --->

function on() {

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

}

​

function off() {

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

}

​