Examples of how to use CSS + JavaScript or pure js to implement translucent masks and css masks

Examples of how to use CSS + JavaScript or pure js to implement translucent masks and css masks

CSS + JavaScript
Implementation principle:
Create a fully-screen div and use absolute positioning. In this way, it can leave the Document Stream without affecting other elements and set it to a translucent state, of course, this transparency can be adjusted at will. At the same time, a login element can be created, which also uses absolute positioning, and the value of its z-index attribute is greater than the div of the screen, at this time, it will not be covered by the full screen div. By default, the value of the display attribute of the two divs is none. You can click the corresponding button to change their display attribute values.

<! DOCTYPE html> 
The above provides the basic mask function. When you click to bring up a mask, an object will pop up. When you click to close it, the mask effect disappears.

Pure JavaScript:
Effect: When a window is displayed, the page after the window is dimmed and cannot be operated.
Difficulty: Because the div layer cannot cover the select control, special processing is required. There are two methods. One is to add an iframe under the pop-up window to cover the select; the second method is to hide the select control when it is popped up. The second method is selected here.
Implementation principle: Add a translucent layer between the page and the pop-up window to overwrite the page content.
Code:
<Script language = "javascript"> function Open () {// hide the select control DispalySelect (0); // display the mask layer document. getElementById ("divPageMask "). style. display = "block"; // process the mask layer resizeMask (); window. onResize = resizeMask; // The document window is displayed. getElementById ("divOpenWin "). style. display = "block";} function Close () {// display the select control DispalySelect (1); // process the mask layer divPageMask. style. width = "0px"; divPageMask. style. height = "0px"; di VOpenWin. 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-divO PenWin. offsetHeight)/2);} function DispalySelect (val) {// display and hide 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; filter: alpha (opac Ity = 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 (); "> disable </a> </center> </div> <label> </label> <center> <table border =" 0 "cellpadding =" 0 "cellspacing =" 0 "width =" 650 "> <tbody> <tr> <td colspa N = "2" align = "center" height = "90"> <p>  </p> <p> </td> </tr> <td height = "10" style = "color: #666666; font-size: 13px "> </td> </tr> </tbody> </table> <table bgcolor =" # e1e1e1 "border =" 0 "cellpadding =" 0 "cellspacing =" 1 "height =" 85 "width =" 650 "> <tbody> <tr> <td align =" center "bgcolor =" # f9f9f9 "> <table height = 50 ce Llspacing = 0 cellpadding = 0 width = 600 style = "margin-top: 20px "> <FORM name =" f "action =" http://www.sopull.com/ShopList.asp "> <tbody> <tr> <td class =" searchbar_word "> keywords: </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.as P? CityName = Beijing "> </script> </td> <td align = middle width = 95> <input name =" s "type = submit value =" Search "> </td> </tr> </form> <tr> <td width = "64" height = "30"> </td> <td colspan = "4" valign = "middle" class = "search_text"> example: restaurant; electrical appliances; supermarket </table> </td> </tr> </tbody> </table> </center> <p align = "center"> </p> <p align = "center"> <a href = "javascript: open (); "> enable 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/Index/line_2.gif" width = "580">  </td> </tr> --> <tr> <td class =" link "align =" center "height =" 30 "> <a href = "#" target = _ blank> <font color = "# FF6600"> store submission for free </font> </a> | <a class = "toplink" href = "#"> store promotion </a> | <a class = "toplink" href = "#"> about soupshop </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 to homepage </a> | <a class =" toplink "onClick =" javascript: window. external. addFavorite ('HTTP: // www.sopull.com/', 'soupai-chinanetcenter search engine ') "href =" http://www.sopull.com/# "> Add to favorites </a> </td> </tr> <td align =" center "height =" 30 ">©2007 soupu Guangdong ICP filing No. 07006767 </td> </tr> </tbody> </table>