<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/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>史上最精简，最强大的网页特效遮罩层效果，支持ie firefox jquery遮罩层</title>
<script type="text/网页特效" src="jquery-1.3.2.网页特效"></script>
<script type="text/网页特效">
//显示灰色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});
}
}
//关闭灰色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();">关闭</a></div>
</div>
<!-- js遮罩层上方的对话框 -->
</body>
</html>