Pop up the simplest template mask layer js code
- 2020-03-30 00:44:25
- OfStack
Suppose we have a container as follows:
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:
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
<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>