Pop up the simplest template mask layer js code

Suppose we have a container as follows:

 
<style type= " text/css " > 
#container{width:auto;height:auto; overflow:hidden;} 
 
</style> 
<div id= " container "  > 
</div> 

Now you want to pop up a div layer in your web page, making it impossible to manipulate the container until you close the pop-up div layer.
So, we first need to define the div layer of this mask as follows:

 
<div id= " continer " > 
<! - just put the mask layer on container inside  
<divid= " shade "  style= " width:1600px;height:900px; " > 
<input name= " close "  id= " close "  value= "Close" > 
</div> 
</div> 

Next, use js to keep the mask layer on the screen and not manipulate the contents below the mask layer. Click the close button to close the mask layer

 
<script type= " text/javascript " > 
$(function(){ 
//Gets the current browser's internal width and height
varnWidth = window.innerWidth; 
varnHeight = window.innerHeight; 
//Set the width and height of the mask layer
$("#shade").width(nWidth); 
$("#shade").height(nHeight); 
//Set the close button to show in the center
$("#close").css("margin-top",nHeight/2-50+"px"); 
//Sets the events that are triggered when the browser size changes
$(window).resize(function(){ 
//Gets the current browser's internal width and height
varnWidth = window.innerWidth; 
varnHeight = window.innerHeight; 
//Set the width and height of the mask layer
$("#shade").width(nWidth); 
$("#shade").height(nHeight); 
//Set the close button to show in the center
$("#putPwd").css("margin-top",nHeight/2-50+"px"); 
}); 
//Set the close button to remove the mask layer
$("#close").click(function(){ 
$("#shade").removeAttr("id"); 
$("#shade").html(""); 
}); 
//Also can use pure js to write
Document.getElementById( " shade " ).style ... .; 
//Behind say more useless, if interested and really can't write, you can contact me.
}) 
</script>