JavaScript编写页面半透明遮罩效果的简单示例
半透明遮罩层效果基本上都是使用插件实现的，下面为大家分享下使用原生js实现半透明遮罩效果，感兴趣的朋友可以参考下哈，希望对你熟悉原生js有所帮助
<div>
<h4><span>现在注册</span><span>关闭</span></h4>
<p>
<label>用户名</label>
<inputtype="text"class="myinp"onmouseover="this.style.border='1pxsolid#f60'"onfoucs="this.style.border='1pxsolid#f60'"onblur="this.style.border='1pxsolid#ccc'"/>
</p>
<p>
<label>密码</label>
<inputtype="password"class="myinp"onmouseover="this.style.border='1pxsolid#f60'"onfoucs="this.style.border='1pxsolid#f60'"onblur="this.style.border='1pxsolid#ccc'"/>
</p>
<p>
<inputtype="submit"value="注册"class="sub"/>
<inputtype="reset"value="重置"class="sub"/>
</p>
</div>
<div></div><!--遮罩层div-->
<scripttype="text/javascript">
varmyAlert=document.getElementById("alert");
varmyMask=document.getElementById('mask');
varreg=document.getElementById("content").getElementsByTagName("a")[0];
varmClose=document.getElementById("close");
reg.onclick=function()
{
myMask.style.display="block";
myAlert.style.display="block";
myAlert.style.position="absolute";
myAlert.style.top="50%";
myAlert.style.left="50%";
myAlert.style.marginTop="-75px";
myAlert.style.marginLeft="-150px";
document.body.style.overflow="hidden";
}
mClose.onclick=function()
{
myAlert.style.display="none";
myMask.style.display="none";
}
</script>
</body>
</html>
全屏幕遮盖
<!DOCTYPEhtml>
<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"
/>
<tableid="mask"><tr><tdid="mask_td"></td></tr></table>
<script>
//判断浏览器
varisIE=navigator.userAgent.match(/MSIE(\d)/i);
isIE=isIE?isIE[1]:isIE;
//声明变量
varimg,mask;
//获取元素
img=document.getElementById("img");
mask=document.getElementById("mask");
mask.td=document.getElementById("mask_td");
//计算mask的大小
mask.setSize=function(){
//获取文档可见区域宽度并设置到mask上
varde=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(){
//创建一个图片对象
varo=newImage;
//设置图片的地址
o.src=img.src;
//在mask内添加内容
mask.append(o);
//显示mask
mask.show();
};
</script>