In JavaScript, click to view the effect of the translucent mask layer on a large page, and click View mask.

In JavaScript, click to view the effect of the translucent mask layer on a large page, and click View mask.

This effect is frequently used. I am often asked this question, so I need to write it as an article. If someone asks me again, just drop out the URL of this article. This effect is very simple, so I will not explain it too much, but I will understand it by looking at the code annotations. The following is all the code that can be run after being copied to HTML.

<! DOCTYPE html> <style> # mask {position: fixed; width: 100%; top: 0px; left: 0px; _ position: absolute; _ top: expression (documentElement. scrollTop); background: rgba (0.5, 0,); background: transparent \ 9; filter: progid: DXImageTransform. microsoft. gradient (startColorStr = #80000000, endColorStr = #80000000); display: none;} # mask_td {text-align: center ;}</style>  <table id = "mask"> <tr> <td id = "mask_td"> </td> </tr> </table> <script> // judge the browser var isIE = navigator. userAgent. match (/MSIE (\ d)/I); isIE = isIE? IsIE [1]: isIE; // declare the variables var img and mask; // obtain the element img = document. getElementById ("img"); mask = document. getElementById ("mask"); mask. td = document. getElementById ("mask_td"); // calculate the size of the mask. setSize = function () {// get the width of the visible area of the document and set it to var demo-document.doc umentElement; mask. style. width = de. clientWidth + "px" mask. style. height = de. clientHeight + "px" ;}; // Add the show method mask. show = function () {// hide the page's scroll bar document [isIE <9? "DocumentElement": "body"]. style. overflow = "hidden"; // calculate the size of the mask. setSize (); // display mask. style. display = isIE = 6? "Block": "table" ;}; // Add the hide method mask. hide = function () {// display the page scroll bar document [isIE <9? "DocumentElement": "body"]. style. overflow = ""; // clear the content of the mask. td. innerHTML = ""; // hide mask. style. display = "none" ;}; // Add the append method mask. append = function (e) {// add content to the mask's TD. td. appendChild (e) ;}; // click mask to close the mask. onclick = function (e) {// determine the event source. If a blank area is clicked, close mask e = e | event; (e.tar get | e. srcElement) = mask. td & mask. hide () ;}; // the size of the mask window is also changed when the form size is changed. 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 in the mask. append (o); // display mask. show () ;}; </script>

There is no difficulty in this effect. The most difficult part is the implementation of translucent. The opacity of CSS3 and the alpha of IE can both be translucent, but that is the translucent of the entire element. Using this method means that the sub-element is also translucent, so we must set the transparency to the background instead of the entire element. You can use rgba directly in CSS3. IE does not have this method, but you can use the gradient filter to replace it, because the gradient filter also supports transparency. Also, in IE9, It is compatible with CSS3 transparency and filter transparency. If both are used, the page transparency will be incorrect. Therefore, we have blocked one of the transparency effects in IE9.
Another problem is that IE6 is compatible, and IE6 does not support fixed. Therefore, we need to use absolute and dynamic top settings to ensure compatibility. There is also a browser difference in the size calculation of the mask. In fact, the browser difference in this effect is still quite large, however, when we see some small issues, we will understand that there is no need for a long story.