Pop-up mask layer effect through operation of element node creation, deletion, etc.
<style>
#oMask {
opacity:0.7;
Filter:alpha (opacity=70);
Position:absolute;
z-index:15;
Background: #000;
left:0;
top:0;
}
#oLogin {
Position:absolute;
width:400px;
height:200px;
BORDER:3PX solid red;
z-index:26;
Background: #fff;
}
#close {
Position:absolute;
width:12px;
height:12px;
top:5px;
right:5px;
border-radius:6px;
line-height:12px;
Text-align:center;
border:1px solid #000;
}
</style>
<script>
Function upspring () {
//Get the size of the scrolling screen
var sheight=document.documentelement.scrollheight| | Document.body.scrollHeight;
var swidth=document.documentelement.scrollwidth| | Document.body.scrollWidth;
//Get visual area
var cheight=document.documentelement.clientheight| | Document.body.clientHeight;
var cwidth=document.documentelement.clientwidth| | Document.body.clientWidth;
//Console.log (cwidth)
Creating a matte Layer
var omask=document.createelement (' div ')
Omask.id= ' Omask '
Set the size of the matte layer
omask.style.height=sheight+ ' px '
omask.style.width=swidth+ ' px '
To add a matte layer to a page
Document.body.appendChild (Omask)
Create a login box
var ologin=document.createelement (' Ologin ')
Ologin.id= ' Ologin '
Ologin.innerhtml= "<label> username </lable><input tyle= ' text ' ><br/><label> password </label ><input type= ' text ' > <div id= ' close ' >x</div> '
Document.body.appendChild (Ologin)
ologin.style.left= (cwidth-ologin.offsetwidth)/2+ ' px ';
ologin.style.top= (cheight-ologin.offsetheight)/2+ ' px ';
Alert (ologin.top)
var Close=document.getelementbyid (' Close ');
Omask.onclick=close.onclick=function () {//can be such that multiple bindings
Document.body.removeChild (Omask)//Do not add quotation marks
Document.body.removeChild (Ologin)
}
}
</script>
Effect of masking layer jumping out of landing box