CSS+JavaScript
Implementation principle:
Create a full-screen div, using absolute positioning, so that it can be separated from the document stream, without affecting other elements, and set it to a translucent state. Of course, this transparency can be adjusted at will, and create a login element, which also uses absolute positioning and makes its z-index attribute value greater than the div on the screen, and at this time it will not be covered by the full-screen div. In the default state, the display attribute value of these two divs is none. When clicking the corresponding button, they can change their display attribute value.
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//www.VeVB.COM/" /> <title>How to pop up a full-screen gray-black transparent mask effect-Wulin.com</title> <style type="text/css"> * { margin:0px; padding:0px; } .zhezhao { width:100%; height:100%; background-color:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; position:absolute; left:0px; top:0px; display:none; z-index:1000; } .login { width:280px; height:180px; position:absolute; top:200px; left:50%; background-color:#000; margin-left:-140px; display:none; z-index:1500; } .content { margin-top:50px; color:red; line-height:200px; height:200px; text-align:center; } </style> <script type="text/javascript"> window.onload=function() { var zhezhao=document.getElementById("zhezhao"); var login=document.getElementById("login"); var bt=document.getElementById("bt"); var btclose=document.getElementById("btclose"); bt.onclick=function() { zhezhao.style.display="block"; login.style.display="block"; } btclose.onclick=function() { zhezhao.style.display="none"; login.style.display="none"; } } </script> </head> <body> <div id="zhezhao"></div> <div id="login"><button id="btclose">Click to close</button></div> <div>Wulin.com welcomes you, <button id="bt">Click to pop up mask</button></div> </body> </html>The above implements the basic mask function. When clicking to pop up the mask, an object will pop up. When clicking to close, the mask effect will disappear.
Pure JavaScript:
Implementation effect: When a window pops up, the page behind the window becomes dark and cannot be operated.
Difficulty: Because the div layer cannot cover the select control, there are two special methods: one is to add an iframe below the pop-up window to cover the select; the second is to hide the select control when pop-up, and choose the second method here.
Implementation principle: add a translucent layer on the page and the middle of the pop-up window to overwrite the content of the page.
Code:
<script language="javascript"> function Open() { //Hide the select control DisplaySelect(0); //Show mask layer document.getElementById("divPageMask").style.display="block"; //Train the mask layer resizeMask(); window.onResize = resizeMask; //Show pop-up document.getElementById("divOpenWin").style.display="block"; } function Close() { //Show select control DisplaySelect(1); //Processing mask layer divPageMask.style.width = "0px"; divPageMask.style.height = "0px"; divOpenWin.style.display = "none"; window.onResize = null; document.getElementById("divOpenWin").style.display="none"; } //Page mask function resizeMask() { divPageMask.style.width = document.body.scrollWidth; divPageMask.style.height = document.body.scrollHeight; divOpenWin.style.left = ((document.body.offsetWidth - divOpenWin.offsetWidth) / 2); divOpenWin.style.top = ((document.body.offsetHeight - divOpenWin.offsetHeight) / 2); } function DisplaySelect(val) { //Show and hide the select control var displayType; var arrdispalyType=["hidden","visible"]; var arrObjSelect=document.getElementsByTagName("select"); for (i=0;i<arrObjSelect.length;i++) { arrObjSelect[i].style.visibility=arrdispalyType[val]; } } </script> <style type="text/css"> .body,td{font-size:12px} #divPageMask{background-color:white; filter:alpha(opacity=50);left:0px;position:absolute;top:0px;} #divOpenWin{background-color:#EEEEEE;position:absolute;left:0px;top:0px;display: none;z-index:50; width:300px;height:150px} </style> <div id="divPageMask"></div> <div id="divOpenWin"><center><a href="javascript:Close();">Close</a></center></div> <label></label> <center> <table cellpadding="0" cellpacing="0"> <tbody> <tr> <td colspan="2" align="center"><p><img src="http://www.sopul.com/Images/Index/logo.gif"></p> <p></p> <p></p></td> </tr> <tr> <td style="color:#666666;font-size:13px"></td> </tr> </tbody> </table> <table bgcolor="#e1e1e1" cellpadding="0" cellpacing="1"> <tbody> <tr> <td align="center" bgcolor="#f9f9f9"><table height=50 cellpacing=0 cellpadding=0 width=600 style="margin-top:20px"> <FORM name="f" action="http://www.sopull.com/ShopList.asp"> <tbody> <ttr> <td>Keywords:</td> <td><input type="text" name="k" size=30 /></td> <td align=middle width=101>Location:</td> <td align=middle width=97 id="cn"><script language="javascript" src="http://www.sopull.com/Inc/Js/ListCity.asp?CityName=Beijing"></script></td> <td align=middle width=95><input name="s" type=submit value="Search Shop"></td> </tr> </form> <tr> <td></td> <td colspan="4" valign="middle">For example: restaurant; appliances; supermarket</table></td> </tr> </tbody> </table> </table> </table> </table> </center> <p align="center"></p> <p align="center"><a href="javascript:Open();">Open mask</a></p> <p align="center"></p> <table align="center" cellpadding="0" cellpacing="0"> <tbody> <!-- <tr> <td align="center" background="Images/Index/line_2.gif"><img src="Images/Index/line_2.gif"></td> </tr>--> <tr> <td align="center"><a href="#" target=_blank><font color="#FF6600">Shop promotion</a>| <a href="#">About Shop</a>| <a class=b href="#" target=_blank>Business Cooperation</a>| <a onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sopull.com');return false;" href="http://www.sopull.com/#">Set as homepage</a>| <a onClick="javascript:window.external.addFavorite('http://www.sopull.com/','Soupu.com-China's largest store search engine')" href="http://www.sopull.com/#">Add to favorites</a> </td> </tr> <tr> <td align="center">©2007 Soupu.com Guangdong ICP No. 07006767</td> </tr> </tbody> </table>