Examples of translucent matte effects using css+javascript or pure JS sharing _javascript Tips

css+javascript
implementation:
Create a full screen div, use absolute positioning, so that it can detach from the document flow, not affect other elements, and set it to semi-transparent state, Of course, this transparency can be arbitrarily tuned, while creating a login element, it also uses absolute positioning, and its Z-index property value is greater than the face screen Div, this time it will not be Mansi div obscured. The Display property value of these two div is none in the default state. When you click the corresponding button, you can change their display property values.

<! DOCTYPE html>  

The above implementation of the basic mask function, when clicked Pop-up Mask, will pop an object, when the click Off, mask effect disappears.

Pure javascript:
implementation effect: When a window pops up, the page behind the window darkens and cannot be manipulated.

Difficult point: Because the div layer is not able to hide the select control, so special treatment, two methods, one is under the pop-up window with a layer of IFRAME to cover the Select; the second is to hide the Select control in the pop-up, select the second method.

Implementation principle: On the page and the pop-up window in the middle of a translucent layer, the content of the page cover out.

Code:

<script language= "JavaScript" > Function Open () {//Hide Select control dispalyselect (0); 
 Displays the matte layer document.getElementById ("Divpagemask"). style.display= "Block"; 
 Handle the Mask layer resizemask (); 
 Window.onresize = Resizemask; 
Displays pop-up window document.getElementById ("Divopenwin"). style.display= "Block"; 
 function Close () {//Display Select control Dispalyselect (1); 
 Handle the 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); 
 The function Dispalyselect (val) {//shows and hides the Select control var dispalytype; 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; fil 
Ter:alpha (opacity=50); left:0px;position:absolute;top:0px;} #divOpenWin {background-color: #EEEEEE;p osition: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 border= "0" cellpadding= "0" cellspacing= "0" width= "650" > <tbody> <tr> <td colspan= "2" align= "Center" height= "9 
 0 "><p></p> <p> </p> <p> </p></td> </tr> <tr> <td height= "style=" color: #666666; font-size:13px "> </td> </tr> &LT;/TB ody> </table> <table bgcolor= "#e1e1e1" border= "0" cellpadding= "0" cellspacing= "1" height= "" width= "650" & 
 Gt <tbody> <tr> <td align= "center" bgcolor= "#f9f9f9" ><table height=50 cellspacing=0 cellpadding=0 wi 
 dth=600 style= "margin-top:20px" > <form name= "F" action= "http://www.sopull.com/ShopList.asp" > <tbody> <tr> <td class= "searchbar_word" > keyword:</td> <td width= "241" ><input type= "text" name= "K" size =30/></td> <td align=middle width=101 class= "Searchbar_word" > 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 width= "height=" > </td> <td colspan= "4" valign= "Middle" class= "Search_text" > For example: Restaurant, electronics, supermarkets </table></td> </tr> </tbody> </table> </center> <p align= "Center" > </p> <p align= "center" ><a href= "Javascript:open ();" > Open Mask </a></p> <p align= "center" > </p> <table width= "650" border= "0" align= "center "cellpadding=" 0 "cellspacing=" 0 "> <tbody> <!--<tr> <td align=" center "background=" Images/inde X/line_2.gif "width=" 580 "></td> </tr>- -> <tr> <td class= "link" align= "center" height= "><a href=" # "Target=_blank><font color=" #FF 6600 "> Free to submit shop </font></a> |  <a class=" TopLink "href=" # "> Store Promotion </a> |  <a class= "TopLink" href= "#" > About shop </a> |  <a class=b HRef= "#" target=_blank> Business cooperation </a>  |  <a class= "TopLink" onclick= "this.style.behavior=" url (# Default#homepage) '; This.sethomepage (' http://www.sopull.com '); return false; "Href= http://www.sopull.com/#" > Set Home page </a> |  <a class= "TopLink" onclick= javascript:window.external.addFavorite (' http:// www.sopull.com/', ' Search the Net-China's largest store search engine '] "href=" http://www.sopull.com/# "> Favorites </a> </td> </tr> < 
 tr> <td align= "center" height= ">©2007" Shop net      Yue ICP No. 07006767 No. </td> </tr> 

 </tbody> </table>