用div层来实现页面半透明遮罩效果

实现效果：弹出一个窗口的时候，窗口后面的页面变暗，并且不能操作

难点：因为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>&nbsp;</p>
 <p>&nbsp;</p></td>
 </tr>
 <tr>
 <td height="10" style="color:#666666;font-size:13px">&nbsp;</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">&nbsp;</td>
 <td colspan="4" valign="middle" class="search_text">例如：餐厅；电器；超市 
 </table></td>
 </tr>
 </tbody>
 </table>
</center>
<p align="center">&nbsp;</p>
<p align="center"><a href="javascript:Open();">打开遮罩</a></p>
<p align="center">&nbsp;</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>&nbsp;|&nbsp; <a class="toplink" href="#">店铺推广</a>&nbsp;|&nbsp; <a class="toplink" href="#">关于搜铺</a>&nbsp;|&nbsp; <a class=b href="#" target=_blank>业务合作</a> &nbsp;|&nbsp; <a class="toplink" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sopull.com');return false;" href="http://www.sopull.com/#">设为首页</a>&nbsp;|&nbsp; <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">&copy;2007 搜铺网 &nbsp;&nbsp;&nbsp;&nbsp;粤ICP备07006767号</td>
 </tr>
 </tbody>
</table>

评论

1 楼 lqixv 2009-09-09  

很好很强大