js遮罩层

 
首先js代码中加入如下代码：
 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 
<script language="javascript">
 
$(function() {
 
 
}); 
 
 //显示灰色JS遮罩层
 function showBg(ct ){
   var bH=$("body").height();
   var bW=$("body").width()+16;
   var objWH=getObjWh(ct);
$("#fullbg").css({width:bW,height:bH,display:"block"});
   var tbT=objWH.y+"px";
   var tbL=objWH.x+"px";
   $("#"+ct).css({top:tbT,left:tbL,display:"block"}); 
   $(window).scroll(function(){resetBg()});
   $(window).resize(function(){resetBg()});
}
 
function resetBg(){
   var fullbg=$("#fullbg").css("display");
   if(fullbg=="block"){
   var bH2=$("body").height();
   var bW2=$("body").width()+16;
   $("#fullbg").css({width:bW2,height:bH2});
} 
}
 
//关闭灰色JS遮罩层和操作窗口
function closeBg(){
$("#fullbg").css("display","none");
 
 }
  
 function getObjWh(obj){
var point={};
 
var st=document.body.scrollTop;//滚动条距顶部的距离
var sl=document.body.scrollLeft;//滚动条距左边的距离
var ch=document.body.clientHeight;//屏幕的高度
 
var cw=document.body.clientWidth;//屏幕的宽度
 
var objH=$("#"+obj).height();//浮动对象的高度
var objW=$("#"+obj).width();//浮动对象的宽度
var objT=Number(st)+(Number(ch)-Number(objH))/2;
var objL=Number(sl)+(Number(cw)-Number(objW))/2;
point.x = objT;
point.y = objL;
//alert(point.x +"         "+ point.y+"  "+st +"  "+sl  );
return point;
 
}
 
</script>
 
 
文章正文中加入：
 
 <!--控制按钮-->
 <input type="button" value="遮罩" onclick="showBg('fullbg')"  />
<input type="button" value="关闭遮罩" onclick="closeBg()"  />
 
<!--遮罩层-->
<div id="TransBG"  style="z-index:999;border:1px solid red;background-color:#CCFFFF;position:absolute">
<div id="fullbg" style="display:none;filter:alpha(opacity=30);opacity:0.3;background-color:black;position:absolute; left:0px;top: 0px;height:1000px;width:1300px;z-index:9000"></div>
    遮罩层
</div
 
 
===================遮罩二  带有透明遮罩=======
$(function() {
var h = $(document).height()+"px";
var w = $(document).width()+"px";
$('#t').css({ height:h,width:w});
 }); 
 
 
 
 
<div id="t" style="border:solid red 1px;filter:alpha(opacity=0.5);opacity:0.5;">
111111
</div>