工作要用到遮盖层，网上搜到一个记录下！~ 方便以后使用

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5.         <title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title> 
  6.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
  7.         <script type="text/javascript"> 
  8.             //显示灰色JS遮罩层  
  9.             function showBg(ct,content){  
  10.                 var bH=$("body").height();  
  11.                 var bW=$("body").width()+16;  
  12.                 var objWH=getObjWh(ct);  
  13.                 $("#fullbg").css({width:bW,height:bH,display:"block"});  
  14.                 var tbT=objWH.split("|")[0]+"px";  
  15.                 var tbL=objWH.split("|")[1]+"px";  
  16.                 $("#"+ct).css({top:tbT,left:tbL,display:"block"});  
  17.                 $("#"+content).html("<div style='text-align:center'>正在加载，请稍后...</div>");  
  18.                 $(window).scroll(function(){resetBg()});  
  19.                 $(window).resize(function(){resetBg()});  
  20.             }  
  21.             function getObjWh(obj){  
  22.                 var st=document.documentElement.scrollTop;//滚动条距顶部的距离  
  23.                 var sl=document.documentElement.scrollLeft;//滚动条距左边的距离  
  24.                 var ch=document.documentElement.clientHeight;//屏幕的高度  
  25.                 var cw=document.documentElement.clientWidth;//屏幕的宽度  
  26.                 var objH=$("#"+obj).height();//浮动对象的高度  
  27.                 var objW=$("#"+obj).width();//浮动对象的宽度  
  28.                 var objT=Number(st)+(Number(ch)-Number(objH))/2;  
  29.                 var objL=Number(sl)+(Number(cw)-Number(objW))/2;  
  30.                 return objT+"|"+objL;  
  31.             }  
  32.             function resetBg(){  
  33.                 var fullbg=$("#fullbg").css("display");  
  34.                 if(fullbg=="block"){  
  35.                     var bH2=$("body").height();  
  36.                     var bW2=$("body").width()+16;  
  37.                     $("#fullbg").css({width:bW2,height:bH2});  
  38.                     var objV=getObjWh("dialog");  
  39.                     var tbT=objV.split("|")[0]+"px";  
  40.                     var tbL=objV.split("|")[1]+"px";  
  41.                     $("#dialog").css({top:tbT,left:tbL});  
  42.                 }  
  43.             }  
  44.  
  45.             //关闭灰色JS遮罩层和操作窗口  
  46.             function closeBg(){  
  47.                 $("#fullbg").css("display","none");  
  48.                 $("#dialog").css("display","none");  
  49.             }  
  50.  
  51.         </script> 
  52.         <style type="text/css"> 
  53.  
  54.             #fullbg{background-color: Gray;display:none;z-index:3;position:absolute;left:0px;top:0px;filter:Alpha(Opacity=30);/* IE */-moz-opacity:0.4;/* Moz + FF */opacity: 0.4;}  
  55.  
  56.             #dialog {position:absolute;width:200px;height:200px;background:#F00;display: none;z-index: 5;}  
  57.  
  58.             #main {  
  59.                 height: 1500px;  
  60.             }  
  61.         </style> 
  62.     </head> 
  63.     <body> 
  64.         <div id="main"> 
  65.             <a href="#rhis" onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a> 
  66.         </div> 
  67.         <!-- JS遮罩层 --> 
  68.         <div id="fullbg"></div> 
  69.         <!-- end JS遮罩层 --> 
  70.         <!-- 对话框 --> 
  71.         <div id="dialog"> 
  72.             <div id="dialog_content"></div> 
  73.             <div style="text-align: center;"><a href="#" onclick="closeBg();">关闭</a></div> 
  74.         </div> 
  75.         <!-- JS遮罩层上方的对话框 --> 
  76.     </body> 
  77. </html> 
  78.