当前位置: 代码迷 >> HTML/CSS >> 网页设计 层的叠放顺序,该怎么解决
  详细解决方案

网页设计 层的叠放顺序,该怎么解决

热度:310   发布时间:2012-06-07 15:05:14.0
网页设计 层的叠放顺序
我想在网页建一个覆盖层,点击按钮时这个覆盖层覆盖了页面上所有东西,请问该怎么做呢,我做的时候只能覆盖部分,对于其他层还是覆盖不了。

还有层的透明度怎么设置呢?


怎样让层显示在页面中央?




主要效果就是点击登陆按钮,弹出一个层,另外有新的层覆盖页面的东西,达到后面页面呈现灰色,亮点集中在弹出层,而这个弹出层显示在页面的正中央


谢谢大家了

------解决方案--------------------
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> 
  相关解决方案