网页设计 层的叠放顺序
我想在网页建一个覆盖层，点击按钮时这个覆盖层覆盖了页面上所有东西，请问该怎么做呢，我做的时候只能覆盖部分，对于其他层还是覆盖不了。
还有层的透明度怎么设置呢？
怎样让层显示在页面中央？
主要效果就是点击登陆按钮，弹出一个层，另外有新的层覆盖页面的东西，达到后面页面呈现灰色，亮点集中在弹出层，而这个弹出层显示在页面的正中央
谢谢大家了
[解决办法]
- 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>