Eject the simplest modular mask layer of JS code _javascript Tips

Suppose we have a container container as follows:

Copy Code code as follows:

<style type= "Text/css" >
#container {width:auto;height:auto; overflow:hidden;}
/* The Overflow:hidden property is primarily designed to automatically hide parts that exceed container, and this property is set to address IE8 and the following version of browser compatibility issues.
</style>
<div id= "Container" >
</div>

Now you have to pop a div layer on the Web page so that you can't manipulate container before you close the div layer that pops up.
So, first we need to define the div layer of the mask as follows:

Copy Code code as follows:

<div id= "Continer" >
<!-only so put the mask layer in the container.
<divid= "Shade" style= "width:1600px;height:900px;/* to the mask layer an initial size * * * >
<input name= "Close" id= "closed" value= "off" >
</div>
</div>

Next, is to use JS to make the mask layer always displayed on the screen does not operate the mask layer below the content, click the Close button to close the mask layer

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
// Gets the current browser's internal width and height
Varnwidth = window.innerwidth;
Varnheight = window.innerheight;
//sets the width and height of the mask layer
$ ("#shade"). Width (nwidth);
$ ("#shade"). Height (nheight);
//Set the Close button to center
$ ("#close"). CSS ("Margin-top", nheight/2-50+ "px");
//Set events that are triggered when the browser size changes
$ (window). Resize (function () {
//Get the current browser's internal width and height
Varnwidth = window.innerwidth;
Varnheight = window.innerheight;
//sets the width and height of the mask layer
$ ("#shade"). Width (nwidth);
$ ("#shade"). Height (nheight);
//Set the Close button to center
$ ("#putPwd"). CSS ("Margin-top", nheight/2-50+ "px");
});
//Set off button to eliminate mask layer
$ ("#close"). Click (function () {
$ ("#shade"). REMOVEATTR ("id");
$ ("#shade"). HTML ("");
});
//can also be written with pure JS
document.getElementById ("shade"). Style ...;
//Later said no good, if interested and will not write, you can contact me.
})
</script>