JavaScript编写页面半透明遮罩效果的简单示例_javascript技巧

 
现在注册关闭
 
  用户名  
 
  密　码  
 
   
 
 

 <script type="text/javascript"> var myAlert = document.getElementById("alert"); var myMask=document.getElementById('mask'); var reg = document.getElementById("content").getElementsByTagName("a")[0]; var mClose = 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》   　

全屏幕遮盖

《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》