使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享

CSS+JavaScript
实现原理:
创建一个满屏的div，使用绝对定位，这样的话它就可以脱离文档流，对其他的元素不会产生影响，并且将其设置为半透明状态，当然这个透明度可以随便调的，同时创建一个login元素，它也使用绝对定位，并将其z-index属性值大于面屏的div，这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。

<！DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-脚本之家</title> <style type="text/css"> * {margin:0px;padding:0px; } .zhezhao {width:100%;height:100%;background-color:#000;filter:alpha（opacity=50）;-moz-opacity:0.5;opacity:0.5;position:absolute;left:0px;top:0px;display:none;z-index:1000; } .login {width:280px;height:180px;position:absolute;top:200px;left:50%;background-color:#000;margin-left:-140px;display:none;z-index:1500; } .content {margin-top:50px;color:red;line-height:200px;height:200px;text-align:center; } </style> <script type="text/javascript"> window.onload=function（） {var zhezhao=document.getElementById（"zhezhao"）;var login=document.getElementById（"login"）;var bt=document.getElementById（"bt"）;var btclose=document.getElementById（"btclose"）;bt.onclick=function（）{zhezhao.style.display="block";login.style.display="block";}btclose.onclick=function（）{zhezhao.style.display="none";login.style.display="none";} } </script> </head> <body><div class="zhezhao" id="zhezhao"></div><div class="login" id="login"><button id="btclose">点击关闭</button></div><div class="content">脚本之家欢迎您，<button id="bt">点击弹出遮罩</button></div> </body> </html>

以上实现了基本的遮罩功能，当点击弹出遮罩，会弹出一个对象，当点击关闭，遮罩效果消失。

纯JavaScript：
实现效果：弹出一个窗口的时候，窗口后面的页面变暗，并且不能操作。
难点：因为div层是不能把select控件遮住的，所以要特殊处理，方法两种，一种是在弹出窗口下面加一层iframe来遮住select；第二种是所以要在弹出的时候，先把select控件隐藏，这里选择第二种方法。
实现原理：在页面上和弹出窗口中间加一个半透明的层，把页面的内容覆盖掉。
代码：

<script language="javascript"> function Open（） {//隐藏select控件DispalySelect（0）;//显示遮罩层document.getElementById（"divPageMask"）.style.display="block";//处理遮罩层resizeMask（）;window.onResize = resizeMask;//显示弹出窗口document.getElementById（"divOpenWin"）.style.display="block"; } function Close（） {//显示select控件DispalySelect（1）;//处理遮罩层divPageMask.style.width = "0px";divPageMask.style.height = "0px";divOpenWin.style.display = "none";window.onResize = null; document.getElementById（"divOpenWin"）.style.display="none"; } //页面遮罩 function resizeMask（） {divPageMask.style.width = document.body.scrollWidth;divPageMask.style.height = document.body.scrollHeight;divOpenWin.style.left = （（document.body.offsetWidth - divOpenWin.offsetWidth） / 2）;divOpenWin.style.top = （（document.body.offsetHeight - divOpenWin.offsetHeight） / 2）; } function DispalySelect（val） { //显示和隐藏select控件var dispalyType;var arrdispalyType=["hidden","visible"];var arrObjSelect=document.getElementsByTagName（"select"）;for （i=0;i<arrObjSelect.length;i++）{arrObjSelect[i].style.visibility=arrdispalyType[val];} } </script><style type="text/css"> .body,td{font-size:12px} #divPageMask{background-color:white; filter:alpha（opacity=50）;left:0px;position:absolute;top:0px;} #divOpenWin{background-color:#EEEEEE;position: absolute;left:0px;top:0px;display: none;z-index:50; width:300px;height:150px} </style><div id="divPageMask"></div> <div id="divOpenWin"><center><a href="javascript:Close（）;">关闭</a></center></div> <label></label> <center><table border="0" cellpadding="0" cellspacing="0" width="650"><tbody><tr><td colspan="2" align="center" height="90"><p><img src="http://www.sopull.com/Images/Index/logo.gif" height="60" width="250"></p><p> </p><p> </p></td></tr><tr><td height="10" style="color:#666666;font-size:13px"> </td></tr></tbody></table><table bgcolor="#e1e1e1" border="0" cellpadding="0" cellspacing="1" height="85" width="650"><tbody><tr><td align="center" bgcolor="#f9f9f9"><table height=50 cellspacing=0 cellpadding=0 width=600 style="margin-top:20px"><FORM name="f" action="http://www.sopull.com/ShopList.asp"><tbody><tr><td class="searchbar_word">关键字：</td><td width="241"><input type="text" name="k" size=30 /></td><td align=middle width=101 class="searchbar_word">所在地：</td><td align=middle width=97 id="cn"><script language="javascript" src="http://www.sopull.com/Inc/Js/ListCity.asp?CityName=北京市"></script></td><td align=middle width=95><input name="s" type=submit value=" 搜 铺 "></td></tr></form><tr><td width="64" height="30"> </td><td colspan="4" valign="middle" class="search_text">例如：餐厅；电器；超市</table></td></tr></tbody></table> </center> <p align="center"> </p> <p align="center"><a href="javascript:Open（）;">打开遮罩</a></p> <p align="center"> </p> <table width="650" border="0" align="center" cellpadding="0" cellspacing="0"><tbody><！-- <tr><td align="center" background="Images/Index/line_2.gif" width="580"><img src="Images/Index/line_2.gif" height="9" width="9"></td></tr>--><tr><td class="link" align="center" height="30"><a href="#" target=_blank><font color="#FF6600">免费提交店铺</font></a> |  <a class="toplink" href="#">店铺推广</a> |  <a class="toplink" href="#">关于搜铺</a> |  <a class=b href="#" target=_blank>业务合作</a>  |  <a class="toplink" onClick="this.style.behavior="url（#default#homepage）";this.setHomePage（"http://www.sopull.com"）;return false;" href="http://www.sopull.com/#">设为首页</a> |  <a class="toplink" onClick="javascript:window.external.addFavorite（"http://www.sopull.com/","搜铺网-中国最大店铺搜索引擎"）" href="http://www.sopull.com/#">加入收藏</a> </td></tr><tr><td align="center" height="30">©2007 搜铺网     粤ICP备07006767号</td></tr></tbody> </table>