The translucent mask layer effect is basically achieved using plug-ins. Let me share with you the use of native js to achieve translucent mask effect. Interested friends can refer to it. I hope it will be helpful for you to be familiar with native js.
<div > <h4><span>Register now</span><span>Close</span></h4> <p> <label> Username</label> <input type="text" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /> </p> <p> <label> Password</label> <input type="password" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /> </p> <p> <input type="submit" value="register" /> <input type="reset" value="reset" /> </p> </div> <div ></div><!-- Mask layer div--> <script type="text/javascript"> var myAlert = document.getElementById("alert"); var myMask=document.getElementById('mask'); var reg = document.getElementById("content").getElementsByTagName("a")[0]; var mClose = document.getElementById("close"); reg.onclick = function() { myMask.style.display="block"; myAlert.style.display = "block"; myAlert.style.position = "absolute"; myAlert.style.top = "50%"; myAlert.style.left = "50%"; myAlert.style.marginTop = "-75px"; myAlert.style.marginLeft = "-150px"; document.body.style.overflow = "hidden"; } mClose.onclick = function() { myAlert.style.display = "none"; myMask.style.display = "none"; } </script> </body> </html>Full screen cover
<!DOCTYPE html><style>#mask { position:fixed;width:100%; top:0px;left:0px; _position:absolute; _top:expression(documentElement.scrollTop); background:rgba(0,0,0,0.5); background:transparent/9; filter:progid:DXImageTransform.Microsoft.Gradient( startColorStr=#80000000,endColorStr=#80000000); display:none;}#mask_td {text-align:center;}</style><img src="http://web-tinker.com/images/TheMagicConch.jpg" id="img" /><table id="mask"><tr><td id="mask_td"></td></tr></table><script>//Judge browser var isIE=navigator.userAgent.match(/MSIE (/d)/i);isIE=isIE?isIE[1]:isIE;//Declare the variable var img,mask;//Get the element img=document.getElementById("img");mask=document.getElementById("mask");mask.td=document.getElementById("mask_td");//Calculate the size of mask mask.setSize=function(){ //Get the visible area width of the document and set it to the mask var de=document.documentElement; mask.style.width=de.clientWidth+"px" mask.style.height=de.clientHeight+"px" mask.style.height=de.clientHeight+"px";};//Add the show method mask.show=function(){ //Hide the scrollbar document[ isIE<9?"documentElement":"body" ].style.overflow="hidden"; //Calculate the size of the mask mask.setSize(); //Show mask.style.display=isIE==6?"block":"table";}; //Add hide method mask.hide=function(){ //Show page scrollbar document[ isIE<9?"documentElement":"body" ].style.overflow=""; //Clear the content inside mask.td.innerHTML=""; //Hide mask.style.display="none";};//Add append method mask.append=function(e){ //Add content in mask TD, you mask.td.appendChild(e);};//Click mask to close mask.onclick=function(e){ //Judge the source of the event, if the blank area is clicked, close mask e=e||event; (e.target||e.srcElement)==mask.td&&mask.hide();};//Add the size of the mask when the form size changes window.onresize=function(){ mask.setSize();};//Click the image event img.onclick=function(){){ //Create an image object var o=new Image; //Set the image address o.src=img.src; //Add content mask.append(o); //Show mask mask.show();};</script>