兼容问题

<!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="../../homepage/js/jquery-1.4.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"});
$(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;
overflow:scroll;
}#main {
height: auto;
}
</style>
</head>
<body>
<div id="main">
<a href="#rhis" onclick="showBg('dialog');">点击这里看JS遮罩层效果</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a href="#rhis" onclick="showBg('dialog');">点击这里看JS遮罩层效果</a>
</div>

<div id="fullbg"></div>


<div id="dialog">
<div style="text-align: center;">正在加载，请稍后...<a href="#" onclick="closeBg();">关闭</a></div>
</div>

</body>
</html>
这是一个jq遮罩层的效果，ie 火狐都支持，谷歌 safari浏览器不兼容谁懂帮忙看看

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

楼上的人们点击页面最底部的那个试试效果   谷歌  safari浏览器不兼容
我这里ie,火狐,chrome,safari..都可以弹出..不知道你说的不兼容是哪方面?
不对啊。点击第二个（点击这里看JS遮罩层效果）出来的遮罩不是在当前屏内，需要把滚动条滚动到顶部才能看到弹出来的遮罩层，
ie可以直接看到。谷歌还得把滚动条滚动到顶部才能看到！！！！
这个楼主去参考一下吧
<!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=gb2312" />
<title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title>
<script type="text/javascript" src="script/jQuery1.6.js"></script>
<script type="text/javascript">
var clientH = null;
var h=null;
window.onload = function(){
h = window.pageYoffset || document.documentElement.scrollTop ||document.body.scrollTop || 0;
clientH = document.documentElement.clientHeight;
}
function showBg(elem){
var w = (document.documentElement.clientWidth/2)-($("#"+ elem).width()/2);
$("#"+ elem).css("top",(h+ (clientH/2)-($("#"+ elem).height()/2))+"px");
$("#"+ elem).css("left",w+"px");
$("#fullbg").css("display","block");
$("#"+ elem).css("display","block");
}
window.onscroll = function(){
h = document.documentElement.scrollTop;
console.log(h)
}
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:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
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;
overflow:scroll;
}#main {
height: auto;
}
</style>
</head>
<body>
<div id="main">
<a href="#rhis" onclick="showBg('dialog');">点击这里看JS遮罩层效果</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a href="#rhis" onclick="showBg('dialog');">点击这里看JS遮罩层效果</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a href="#rhis" onclick="showBg('dialog');">点击这里看JS遮罩层效果</a>
</div>

<div id="fullbg"></div>


<div id="dialog">
<div style="text-align: center;">正在加载，请稍后...<a href="#" onclick="closeBg();">关闭</a></div>
</div>

</body>
</html>
这样就OK了<!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=gb2312" />
<title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title>
<script type="text/javascript" src="script/jQuery1.6.js"></script>
<script type="text/javascript">
 var clientH = null;
 var h=null;
 window.onload = function(){
 clientH = document.documentElement.clientHeight;
if(isSafari=navigator.userAgent.indexOf("Safari")>0){
h = document.body;
}else{
h =document.documentElement;
}
 }
 function showBg(elem){
 var w = (document.documentElement.clientWidth/2)-($("#"+ elem).width()/2);
 $("#"+ elem).css("top",(h.scrollTop+ (clientH/2)-($("#"+ elem).height()/2))+"px");
 $("#"+ elem).css("left",w+"px");
 $("#fullbg").css("display","block");
 $("#"+ elem).css("display","block");
 }

 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:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
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;
overflow:scroll;
}#main {
height: auto;
}
</style>
</head>
<body>
<div id="main">
<a href="#rhis" onclick="showBg('dialog');">点击这里看JS遮罩层效果</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a href="#rhis" onclick="showBg('dialog');">点击这里看JS遮罩层效果</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a href="#rhis" onclick="showBg('dialog');">点击这里看JS遮罩层效果</a>
</div>

<div id="fullbg"></div>


<div id="dialog">
<div style="text-align: center;">正在加载，请稍后...<a href="#" onclick="closeBg();">关闭</a></div>
</div>

</body>
</html>
如果不考虑ie6, 还是有position:fixed比较好些
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){ var scrollPosY ;
var h = document.documentElement.clientHeight /2;
var hh = $("#dialog").height()/2;

window.onscroll = function(){
$("#dialog").css("marginTop","0px");
scrollPosY = $(document).scrollTop();
$("#dialog").css("top",(scrollPosY +h - hh)+"px");
}

$(".pop_btn").click(function(){
$("#fullbg").show();
$("#dialog").show();
return false;
})

$("#close").click(function(){
$("#fullbg").hide();
$("#dialog").hide();
return false;
})})

</script>
<style type="text/css">
*{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#fullbg{
background-color: Gray;
display:none;
z-index:3;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}#dialog {
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
width:200px;
height:200px;
background:#F00;
display:none;
z-index: 5;
overflow:scroll;
}#main {
height: auto;
}
</style>
</head>
<body>
<div id="main">
<a href="#rhis" class="pop_btn">点击这里看JS遮罩层效果</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a href="#rhis" class="pop_btn">点击这里看JS遮罩层效果</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a href="#rhis" class="pop_btn">点击这里看JS遮罩层效果</a>
</div>

<div id="fullbg"></div>


<div id="dialog">
<div style="text-align: center;">正在加载，请稍后...<a href="#" id="close">关闭</a></div>
</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ var scrollPosY ;
 var h = document.documentElement.clientHeight /2;
 var hh = $("#dialog").height()/2;

 window.onscroll = function(){
 $("#dialog").css("marginTop","0px");
 scrollPosY = $(document).scrollTop();
 $("#dialog").css("top",(scrollPosY +h - hh)+"px");
 }

 $(".pop_btn").click(function(){
 $("#fullbg").show();
 $("#dialog").show();
 return false;
 })

 $("#close").click(function(){
 $("#fullbg").hide();
 $("#dialog").hide();
 return false;
 })

$("#fullbg").css("height",Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight)+"px")})




</script>
<style type="text/css">
*{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#fullbg{
background-color: Gray;
display:none;
z-index:3;
position:fixed;
_position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}#dialog {
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
width:200px;
height:200px;
background:#F00;
display:none;
z-index: 5;
overflow:scroll;
}#main {
height: auto;
}
</style>
</head>
<body>
<div id="main">
<a href="#rhis" class="pop_btn">点击这里看JS遮罩层效果</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a href="#rhis" class="pop_btn">点击这里看JS遮罩层效果</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a href="#rhis" class="pop_btn">点击这里看JS遮罩层效果</a>
</div>

<div id="fullbg"></div>


<div id="dialog">
<div style="text-align: center;">正在加载，请稍后...<a href="#" id="close">关闭</a></div>
</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ var scrollPosY ;
 var h = document.documentElement.clientHeight /2;
 var hh = $("#dialog").height()/2;

 window.onscroll = function(){
 $("#dialog").css("marginTop","0px");
 scrollPosY = $(document).scrollTop();
 $("#dialog").css("top",(scrollPosY +h - hh)+"px");
 }

 $(".pop_btn").click(function(){
 $("#fullbg").show();
 $("#dialog").show();
 return false;
 })

 $("#close").click(function(){
 $("#fullbg").hide();
 $("#dialog").hide();
 return false;
 })

$("#fullbg").css("height",Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight)+"px")})




</script>
<style type="text/css">
*{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#fullbg{
background-color: Gray;
display:none;
z-index:3;
position:fixed;
_position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}#dialog {
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
width:200px;
height:200px;
background:#F00;
display:none;
z-index: 5;
overflow:scroll;
}#main {
height: auto;
}
</style>
</head>
<body>
<div id="main">
<a href="#rhis" class="pop_btn">点击这里看JS遮罩层效果</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a href="#rhis" class="pop_btn">点击这里看JS遮罩层效果</a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a href="#rhis" class="pop_btn">点击这里看JS遮罩层效果</a>
</div>

<div id="fullbg"></div>


<div id="dialog">
<div style="text-align: center;">正在加载，请稍后...<a href="#" id="close">关闭</a></div>
</div>

</body>
</html>