Native js achieve pop-up layer effect

Key points of knowledge

1. The width and height of the mask layer are the width and height of the page (page content)

//Get the height and width of the mask layer (content) var sHeight=;
 var sWidth=;

2. Set the login box to set the fixed positioning

3. The formula is displayed in the center of the login box: (visible area width and height - login box width and height)/2

//Get the width and height of the login and set the offset value var dHeight=;
 var dWidth=;
 =(sWidth-dWidth)/2+"px";
 =(wHeight-dHeight)/2+"px";

Complete code

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/"&gt;
&lt;html xmlns="http:///1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;demo&lt;/title&gt;
&lt;style&gt;
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
p{font-size: 100px;}
#mask{
 background: #000;
 opacity: 0.75;
 filter: alpha(opacity=75);
 height: 1000px;
 width: 100%;
 position: absolute;
 left: 0;
 top: 0;
 z-index: 1000;
}
#login{
 position: fixed;
 left: 30%;
 top: 30%;
 z-index:1001; 
}
.loginCon{
 width: 670px;
 height: 380px;
 background: #fff;
 border:5px solid #F01400;
}
#close{
 width: 30px;
 height: 30px;
 background: blue;
 cursor: pointer;
 position: absolute;
 right: 10px;
 top: 10px;
}
#btnLogin{
 width: 80px;
 height: 40px;
 background: #F01400;
 margin:0 auto;
 display: block;
 cursor: pointer;
 border-style: none;
 color: #fff;
 font-size: 16px;
}
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt;
&lt;button &gt;Log in&lt;/button&gt; 
&lt;!--
&lt;div &gt;&lt;/div&gt;
&lt;div &gt;
 &lt;div class="loginCon"&gt;
 &lt;div &gt;&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
--&gt;
&lt;p&gt;1&lt;/p&gt;
&lt;p&gt;1&lt;/p&gt;
&lt;p&gt;1&lt;/p&gt;
&lt;p&gt;1&lt;/p&gt;
&lt;p&gt;1&lt;/p&gt;
&lt;p&gt;1&lt;/p&gt;
&lt;p&gt;1&lt;/p&gt;
&lt;p&gt;1&lt;/p&gt;
&lt;p&gt;1&lt;/p&gt;
&lt;p&gt;1&lt;/p&gt;
&lt;script type="text/javascript"&gt;
function openNew(){
 //Get the page body!  content!  Height and width var sHeight=;
 var sWidth=;
 //Get the height of the visual area, the width is the same as the width of the page content var wHeight=;
 //Create a mask layer div and insert body var oMask=("div");
 ="mask";
 =sHeight+"px";
 // Use 100% of the width directly in the style (oMask);
 //Create a login layer div and insert body var oLogin=("div");
 ="login";
 ="&lt;div class='loginCon'&gt;&lt;div id='close'&gt;&lt;/div&gt;&lt;/div&gt;"
 (oLogin);
 //Get the width and height of the login and set the offset value var dHeight=;
 var dWidth=;
 =(sWidth-dWidth)/2+"px";
 =(wHeight-dHeight)/2+"px";
 //Get Close button var oClose=("close");
 ==function(){
  (oMask);
  (oLogin);
 }
}
=function(){
 var oBtn=("btnLogin");
 =function(){
  openNew();
 }
}
&lt;/script&gt; 
&lt;/body&gt; 
&lt;/html&gt;

The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!