If you don't know yet, you can take a look at this simple example below.
The code copy is as follows:
<html>
<head>
<title>After a window pops up, the subsequent layer is not operational</title>
<script>
function show() //Show hidden layer and 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"; //Show the pop-up layer
}
function hide() //Remove hidden layers and pop-up layers
{
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%; /*The width is set to 100%, so that the hidden background layer can cover the original page*/
filter:alpha(opacity=60); /*Set transparency to 60%*/
opacity:0.6; /*Set transparency to 60% in non-IE browser*/
display:none; /* //www.VeVB.COM */
z-Index:2;}
#hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#ffff;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 to close</div>
<div id="content" onClick="show();">Click to try</div>
</body>
</html>