Js implementation popup window page to grey and unoperable example sharing

  • 2020-03-30 02:56:10
  • OfStack

If you don't already, here's a simple example.

<html>
<head>
<title> After a window pops up, the back layer is not operable </title>
<script>
function show()  //Show the hidden layer and the pop-up layer
{
   var hideobj=document.getElementById("hidebg");
   hidebg.style.display="block";  //Show hidden layer
   hidebg.style.height=document.body.clientHeight+"px";  //Set the height of the hidden layer to the current page height
   document.getElementById("hidebox").style.display="block";  //Display pop-up layer
}
function hide()  //Remove the hidden layer and the pop-up layer
{
   document.getElementById("hidebg").style.display="none";
   document.getElementById("hidebox").style.display="none";
}
</script>
<style>
   body { margin:0px;padding:0px;text-align: center;}
   #hidebg { position:absolute;left:0px;top:0px;
      background-color:#000;
      width:100%;  
      filter:alpha(opacity=60);  
      opacity:0.6;  
      display:none; /* //www.jb51.net */
      z-Index:2;}
   #hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
   #content { text-align:center;cursor:pointer;z-Index:1;}
</style>
</head>
<body>
<div id="hidebg"></div>
<div id="hidebox" onClick="hide();"> Click on close </div>
<div id="content" onClick="show();"> Click on the try </div>
</body>
</html>

 

Related articles: