我想在网页建一个覆盖层，点击按钮时这个覆盖层覆盖了页面上所有东西，请问该怎么做呢，我做的时候只能覆盖部分，对于其他层还是覆盖不了。
还有层的透明度怎么设置呢？
怎样让层显示在页面中央？
主要效果就是点击登陆按钮，弹出一个层，另外有新的层覆盖页面的东西，达到后面页面呈现灰色，亮点集中在弹出层，而这个弹出层显示在页面的正中央
谢谢大家了
------解决方案--------------------
- HTML code
<!DOCTYPE html >
<html>
<head>
<meta charset="gb2312" />
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
ul,li{ list-style:none;}
.wrapper { border:1px solid #e6e6e6;padding:50px;}
.black_overlay{position: fixed; z-index:1000;width: 100%;height: 100%;top: 0;left: 0;filter: alpha(opacity=80);opacity: 0.8;overflow: hidden;background-color: #000;}
*html { background:url(*) fixed; }
*html body { margin:0; height:100%; }
*html .black_overlay{ position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
.white_content {display: none;position: absolute;top: 15%;left: 25%;width: 632px;height: 445px;border: 16px solid #FFF;border-bottom:none;background-color: white;z-index:1002;overflow: auto;}
</style>
<body>
<div class="wrapper">
<p style="font-size:50px"><a href="javascript:" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点我试下</a></p>
<div id="light" class="white_content"><a href = "javascript:" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a></div>
<div id="fade" class="black_overlay" style="display:none;"></div>
</div>
</body>
</html>
------解决方案--------------------
看看这个，研究了挺久
- HTML code
<!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>
<style>
#addnew{cursor:pointer; padding:3px 10px; background:orange}
#overlay{position:absolute; top:0; left:0; width:100%; height:100%; background:#666666; display:none;}
#tan{position:absolute; width:400px; height:150px; background:#fff; border:2px solid #4880EF; display:none;}
#tan div#title{font-size:12px; height:18px; line-height:18px; background:#FC0; border-bottom:1px solid #4880EF; padding:5px;}
#tan span#close{float:right; color:red; cursor: pointer; background:#fff; border:1px solid #f90; padding:0 10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js " type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#addnew").click(function () {
//遮罩层：设置透明度，高宽度（覆盖所有内容）
$("#overlay").css({'opacity':0.7,'width':$(document).width(),'height':$(document).height()}).fadeIn(0);
//弹出层 设置永远 垂直水平居中显示
var pTop = $(window).height()/2 + $(window).scrollTop()- $("#tan").outerHeight(true)/2;
var pLeft = $(window).width()/2 + $(window).scrollLeft() - $("#tan").outerWidth(true)/2
$("#tan").css({ 'top': pTop,'left':pLeft }).fadeIn();
});
//弹出层关闭按钮
$("#close").click(function () {
$("#tan").fadeOut(0);
$("#overlay").fadeOut();
});
//弹出层执行代码
var tanGun = function(){
if($("#tan").is(":visible")){
// 计算水平垂直居中位置
var pTop = $(window).height()/2 + $(window).scrollTop()- $("#tan").outerHeight(true)/2;
var pLeft = $(window).width()/2 + $(window).scrollLeft() - $("#tan").outerWidth(true)/2
$("#tan").animate({ top: pTop,left:pLeft },{duration: 400, queue: false });
}
}
//浏览器滚动条变化 和 窗口大小变化触发事件(使弹出层永远水平垂直居中)
$(window).scroll(function(){tanGun();}).resize(function(){tanGun();});
})
</script>
</head>
<body style="margin:50px;">
<div id="overlay"></div>
<div id="tan">
<div id="title"><span style="float:left">用户登录</span><span id="close">X</span></div>
</div>
<hr />
<input type="button" id="addnew" value="显示弹出层" />
<p style="height:1500px;"></p>
</body>