层的透明显示

怎么才能让层透明显示
并且鼠标选不了层下面的内容
并且能随滚动条的滚动层自动增加高度
实现层遮住层下内容求代码

解决方案 »

  1.   

    是要这样的效果么<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> 测试 </title>
      <style>
    body{margin:0;}
    .none{display:none;}
    .bg{width:100%; height:100%; top:0px; left:0px; margin:0; background:Green; position:absolute; z-index:1000;filter:alpha(opacity=5);opacity: 0.5;-moz-opacity: 0.5;}
    .content{clear:both; margin-top:200px; text-align:center;}
      </style>
     </head> <body>
    <div class="bg none" id="bgID"></div>
    <input type="button" onclick="tranLayout.blockOrNone(1)" value="click me" />
    <div class="content">content</div>
    <div class="content">content</div>
    <div class="content">content</div>
    <div class="content">content</div>
    <div class="content">content</div>
    <div class="content">content</div>
    <div class="content">content</div>
    <div class="content">content</div>
    <div class="content">content</div>
    <script type="text/javascript">
    var tranLayout={
    target:document.getElementById("bgID"),
    blockOrNone:function(flag){
    if(flag==1){
    tranLayout.target.className="bg";
    }
    else{
    tranLayout.target.className="bg none";
    }
    },
    SetHeight:function(){
    tranLayout.target.style.height=document.body.offsetHeight+"px";
    }
    };
    tranLayout.SetHeight();
    </script>
     </body>
    </html>
      

  2.   


    非常优秀，ff/chrome/ie通过，opera失败……
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> demo </title>
      <script language="javascript" src="jQuery/jquery-1.4.2.min.js"></script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {
                $("#<%= this.btndiv.ClientID %>").click(function () {
                     $("#<%= this.loading.ClientID %>").show();
                  });
            })
        </script>
          <style type="text/css">
            /*加载条*/
            div.loading_1
            {
                background-image: url(Images/loading_mid.gif);
                background-position: center center;
                background-repeat: no-repeat;
                margin-top: 20%;
                height: 32px;
            }
            /*透明遮盖层*/
            div.overlay
            {
                background-color: #ffffff;
                opacity: .70;
                filter: Alpha(Opacity=70);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 0;
            }
        </style>
        </head>
    <body style="font-size: small">
    <form id="form1" runat="server">
     <div><input id="btndiv" type="button" value="遮罩" runat="server" /></div>
    <div id="loading" class="overlay" style="display: none;" runat="server">
            <div class="loading_1">
            </div>
        </div>
        <!--纠正进度条高度兼容多浏览器-->
        <script language="javascript" type="text/javascript">        $('#loading').height($(document.body).height());</script>
    </form>
    有用了jquery  需要引用Jquery的包