HTML reset copy

<div id="gb" onclick="off()" title="Click to turn off" style="display: none;"> <div class="gb1">Overlay</div> <div class="gb1"><br> <br><span style="font-size:20px;" >Click to turn off</span></div> </div> <button onclick="on()" >overlay effect</button><p>

CSS reset copy

#gb { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.6); z-index: 2; cursor: pointer; user-select:none; } .gb1{ position:absolute; top:50%; left:50%; font-size:50px; color:white; user-select:none; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%) }

Js JAVASCRIPT reset copy

function on() { document.getElementById("gb").style.display = "block"; } function off() { document.getElementById("gb").style.display = "none"; }