Home > Article > Web Front-end > Example of semi-transparent mask layer effect on the page written in JavaScript. Click to view the larger image_javascript skills

Example of semi-transparent mask layer effect on the page written in JavaScript. Click to view the larger image_javascript skills

WBOYOriginal: 2016-05-16 09:00:261498browse

this effect is used very frequently, and people often ask me this question, so i want 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. you will understand it if you look at the code comments. below is the entire code, you can copy it into html and run it.

<!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"
 width="100" id="img" 
/>
<table id="mask"><tr><td id="mask_td"></td></tr></table>
<script>
//判断浏览器
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE=isIE?isIE[1]:isIE;
//声明变量
var img,mask;
//获取元素
img=document.getElementById("img");
mask=document.getElementById("mask");
mask.td=document.getElementById("mask_td");
//计算mask的大小
mask.setSize=function(){
 //获取文档可见区域宽度并设置到mask上
 var de=document.documentElement;
 mask.style.width=de.clientWidth+"px"
 mask.style.height=de.clientHeight+"px";
};
//添加show方法
mask.show=function(){
 //隐藏页面的滚动条
 document[
 isIE<9?"documentElement":"body"
 ].style.overflow="hidden";
 //计算mask的大小
 mask.setSize();
 //显示
 mask.style.display=isIE==6?"block":"table";
};
//添加hide方法
mask.hide=function(){
 //显示页面滚动条
 document[
 isIE<9?"documentElement":"body"
 ].style.overflow="";
 //清空里面的内容
 mask.td.innerHTML="";
 //隐藏
 mask.style.display="none";
};
//添加append方法
mask.append=function(e){
 //在mask的TD里面添加内容哦你
 mask.td.appendChild(e);
};
//点击mask关闭
mask.onclick=function(e){
 //判断事件来源，如果是空白区域被点击了就关闭mask
 e=e||event;
 (e.target||e.srcElement)==mask.td&&mask.hide();
};
//窗体大小改变时也改变mask的大小
window.onresize=function(){
 mask.setSize();
};
//点击图片的事件
img.onclick=function(){
 //创建一个图片对象
 var o=new Image;
 //设置图片的地址
 o.src=img.src;
 //在mask内添加内容
 mask.append(o);
 //显示mask
 mask.show();
};
</script>

there is no difficulty in this effect. perhaps the most difficult thing is to achieve translucency. both css3's opacity and ie's alpha can achieve translucency, but that is the translucency of the entire element. using that method means that the child element is also made translucent, so we have to set transparency to the background, not the entire element. in css3, rgba can be used directly to set it. there is no such method in ie, but you can use a gradient filter to replace it, because the gradient filter also supports transparency. also, in ie9, it is compatible with both css3 transparency and filter transparency. if both are used, the transparency of the page will be incorrect. so we blocked one of the transparency 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 this. in fact, the browser difference in this effect is quite big, but they are all small problems and you will understand that there is no need for a long explanation.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Real-time display of progress bar for uploading images based on Jquery plug-in Uploadify_jqueryNext article：Real-time display of progress bar for uploading images based on Jquery plug-in Uploadify_jquery

See more

Example of semi-transparent mask layer effect on the page written in JavaScript. Click to view the larger image_javascript skills

Related articles