快捷導(dǎo)航

JS遮罩層效果兼容ie firefox jQuery遮罩層

更新時間：2010年07月26日 14:10:26 作者：

史上最精簡，最強大的JS遮罩層效果，支持ie firefox jQuery遮罩層

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>史上最精簡，最強大的JS遮罩層效果，支持ie firefox jQuery遮罩層</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
//顯示灰色JS遮罩層 
function showBg(ct,content){ 
var bH=$("body").height(); 
var bW=$("body").width()+16; 
var objWH=getObjWh(ct); 
$("#fullbg").css({width:bW,height:bH,display:"block"}); 
var tbT=objWH.split("|")[0]+"px"; 
var tbL=objWH.split("|")[1]+"px"; 
$("#"+ct).css({top:tbT,left:tbL,display:"block"}); 
$("#"+content).html("<div style='text-align:center'>正在加載，請稍后...</div>"); 
$(window).scroll(function(){resetBg()}); 
$(window).resize(function(){resetBg()}); 
} 
function getObjWh(obj){ 
var st=document.documentElement.scrollTop;//滾動條距頂部的距離 
var sl=document.documentElement.scrollLeft;//滾動條距左邊的距離 
var ch=document.documentElement.clientHeight;//屏幕的高度 
var cw=document.documentElement.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; 
return objT+"|"+objL; 
} 
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}); 
var objV=getObjWh("dialog"); 
var tbT=objV.split("|")[0]+"px"; 
var tbL=objV.split("|")[1]+"px"; 
$("#dialog").css({top:tbT,left:tbL}); 
} 
} 

//關(guān)閉灰色JS遮罩層和操作窗口 
function closeBg(){ 
$("#fullbg").css("display","none"); 
$("#dialog").css("display","none"); 
} 

</script> 
<style type="text/css"> 
*{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
} 
#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; 
} 

#dialog { 
position:absolute; 
width:200px; 
height:200px; 
background:#F00; 
display: none; 
z-index: 5; 
} 

#main { 
height: 1500px; 
} 
</style> 
</head> 
<body> 
<div id="main"> 
<a href="#rhis" onclick="showBg('dialog','dialog_content');">點擊這里看JS遮罩層效果</a> 
</div> 
<!-- JS遮罩層 --> 
<div id="fullbg"></div> 
<!-- end JS遮罩層 --> 
<!-- 對話框 --> 
<div id="dialog"> 
<div id="dialog_content"></div> 
<div style="text-align: center;"><a href="#" onclick="closeBg();">關(guān)閉</a></div> 
</div> 
<!-- JS遮罩層上方的對話框 --> 
</body> 
</html> 