js 遮罩层(支持ie,ff)-优快云博客

本文介绍了一种使用纯JavaScript和CSS实现的简洁遮罩层效果，支持IE和Firefox浏览器，并利用jQuery进行部分DOM操作。该遮罩层能够自适应浏览器窗口大小变化，适用于弹窗或加载提示等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因业务需要，写个js遮罩层..本来想直接用jquery中的dialog方法，但发现不是很好看；

后来在网上搜索找到一个比较适合自己的.下面是代码.

<!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=gbk" />
<title>史上最精简，最强大的JS遮罩层效果，支持iefirefoxjQuery遮罩层</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//显示灰色JS遮罩层
function showBg(ct,content){
//var bH=$("body").height();这个是原创的js,都发现有时不行，取不到真正
//高度。所以我就换了下面的方法
var bH=document.documentElement.clientHeight;
var bW=$("body").width()+16;
var objWH=getObjWh(ct);
alert(bW);
alert(bH);
$("#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"});
$(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">

#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;
display:none;
z-index:5;
}

 
</style>
</head>
<body>
<div id="main">
<a href="#rhis"onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a>

adsfasdfasdf

asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>

asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>
</div>
<!--JS遮罩层-->
<div id="fullbg"></div>
<!--endJS遮罩层-->
<!--对话框-->
<div id="dialog">
<div id="dialog_content"><img src="loadingAnimation.gif"/><!--加载的图片 -->
 <br/><div align='center'>加载中....请稍等</div></div>
<div style="text-align:center;"><a href="#"onclick="closeBg();">关闭</a></div>
</div>
<!--JS遮罩层上方的对话框-->
</body>
</html>