Suppose we have a container container as follows:
Copy the code code as follows:
<style type="text/css">
#container{width:auto;height:auto; overflow:hidden;}
/*The overflow:hidden; attribute here is mainly to set the part beyond the container to be automatically hidden. The reason why this attribute is set is to solve the browser compatibility problem of IE8 and below versions*/
</style>
<div id="container" >
</div>
Now we want to pop up a div layer in the web page so that the container cannot be operated before closing the pop-up div layer.
Then, we first need to define the div layer of this mask as follows:
Copy the code code as follows:
<div id="continer">
<!―Just put the mask layer inside the container
<divid=”shade” style=”width:1600px;height:900px;/*Give the mask layer an initial size*/”>
<input name=”close” id=”close” value=”close”>
</div>
</div>
Next, use js to make the mask layer always display on the screen and the content under the mask layer cannot be manipulated. Click the close button to close the mask layer.
Copy the code code as follows:
<script type="text/javascript">
$(function(){
//Get the internal width and height of the current browser
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 be displayed in the center
$("#close").css("margin-top",nHeight/2-50+"px");
//Set the event that is triggered when the browser size changes
$(window).resize(function(){
//Get the internal width and height of the current browser
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 be displayed in the center
$("#putPwd").css("margin-top",nHeight/2-50+"px");
});
//Set the close button to eliminate the mask layer
$("#close").click(function(){
$("#shade").removeAttr("id");
$("#shade").html("");
});
//It can also be written in pure js
Document.getElementById(“shade”).style…….;
//It’s useless to say more later. If you are interested but really don’t know how to write, you can contact me.
})
</script>