This effect is used very frequently, and people often ask me this question, so I have to write it into an article. Next time someone asks, just throw out the URL of this article. This effect is very simple, so I won't explain it too much. If you look at the code comments in detail, you will understand it. The following is all the code, which can be run by copying it into HTML.
<!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>There is no difficulty in this effect, and the most difficult one is perhaps the translucent implementation. Both opacity of CSS3 and alpha of IE can achieve translucency, but that is the translucency of the entire element. Using that method means that the child elements are also translucent, so we have to set the transparency to the background, not the entire element. In CSS3, you can directly use rgba to set it. There is no such method in IE, but you can use a gradient filter instead, because gradient filters also support transparency. Also, in IE9, it is compatible with both the transparency of CSS3 and the transparency of the filter. If both are used, the transparency of the page will be incorrect. So we blocked one of the transparent effects in IE9.
Another problem is that it is compatible with IE6. IE6 does not support fixed, so we need to use absolute and dynamically set top to be compatible with it. Then there is the problem of mask size calculation. There is also a browser difference. In fact, the browser difference in this effect is quite big, but when you see some small problems, you will understand that there is no need to talk about it in a long way.