如何做一个全屏覆盖的层

参考：
http://www.scriptlover.com/pages/article.asp?ArticleID=141

解决方案 »

  1.   

    详细请见：
    http://mjijackson.com/shadowbox/index.html
      

  2.   

    this.Overlay.style.width = document.body.scrollWidth + "px";
    this.Overlay.style.height = document.body.scrollHeight + "px";

    var oThis = this;
    window.onresize = function(){

    oThis.Overlay.style.width = document.body.scrollWidth + "px";
    oThis.Overlay.style.height = document.body.scrollHeight + "px";
    } 现在我是这样
    虽然不完美但基本上是实现了不知有无更好的方法
      

  3.   

    http://country.lvyou168.cn/flashwariii/test.htm
    看看这个
      

  4.   

    呵呵，有一个简单的做法就是设置一个width=100%
    height=100%的遮罩层
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>简单的测试页面</title>
      <style type="text/css">
      <!--
        html
        {
          height: 100%;
        }
        body
        {
          margin: 0px;
          padding: 0px;
          height: 100%;
        }
        #dt_3
        {
          cursor: pointer;
        }
    #left
        {
          position: absolute;
      background-color: #FFFF00;
          z-index: 25;
        
        }
        div#mbDIV
        {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          background-color: #AAAAAA;
          z-index: 10;
          filter: alpha(opacity=80);opacity:0.8;
        }
        div#loginDIV
        {
          position: absolute;
          width: 300px;
          height: 150px;
          background-color: #FFFF00;
          z-index: 20;
        }
        div#loginTopDIV
        {
          width: 100%;
          height: 20px;
          background-color: #FF0000;
          cursor: move;
        }
      -->
      </style>
      <script type="text/javascript">
      <!--
        function show(ele)
        {
          eval(ele + ".style.display = ''");
      
        }
        function hidden(ele)
        {
          eval(ele + ".style.display = 'none'");
        }
      //-->
      </script>
    </head><body><div>出现遮罩层后这部分不能点</div>
    <div id="mbDIV" style="display: none;"></div>
    <div  id="left">
    <h3>请点击 --> 03号拖拉机</h3>
    <p id="dt_1">01号拖拉机</p>
    <p id="dt_2">02号拖拉机</p>
    <p id="dt_3">03号拖拉机</p>
    <p id="dt_4">04号拖拉机</p>
    <p id="dt_5">05号拖拉机</p>
    <p id="dt_6">06号拖拉机</p>
    <p id="dt_7">07号拖拉机</p>
    <p id="dt_8">08号拖拉机</p>
    <p id="dt_9">09号拖拉机</p>
    <p id="dt_10">10号拖拉机</p>
    <p id="dt_11">11号拖拉机</p>
    </div>
    <div id="loginDIV" style="top: 200px;left: 300px;display: none;">
    <div id="loginTopDIV">Move</div>
    <p style="text-align: center;">登陆内容在这里哦</p>
    <form action="#" method="get" style="text-align: center;">
    <input type="button" value="确定" id="button_1" /> <input type="button" value="取消" id="button_2" />
    </form>
    </div>
    <div>出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点出现遮罩层后这部分不能点</div>
    <script type="text/javascript">
    <!--
    /**
    * 这里是乱七八遭信息
    * */
      for(var i=1;i<=11;i++)
      {
        eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");
      }
      var mbDIV = document.getElementById("mbDIV");
      var Lleft = document.getElementById("left");
      var loginDIV = document.getElementById("loginDIV");
      var loginTopDIV = document.getElementById("loginTopDIV");  document.getElementById("button_1").onclick = function()
                                                    {
                                                      hidden("loginDIV");
                                                      hidden("mbDIV");
                                                    }
      document.getElementById("button_2").onclick = function()
                                                    {
                                                      hidden("loginDIV");
                                                      hidden("mbDIV");
                                                    }
      dt_3.onclick = function()
                     {
                       loginDIV.style.left = "300px";
                       show("loginDIV");
                       show("mbDIV")
                     }//-->
    </script>
    </body>
    </html>
      

  6.   

    showbo 的方法太好了
    但我想在js中写
    this.Overlay.style.left = "expression(this.offsetParent.scrollLeft)";
    会报错参数无效
    应该怎么写呢
      

  7.   

    不能这样直接设置，这样无效在ie中只能在css中定义来的，不过你可以写成css的类，然后设置className属性就可以了
      

  8.   

    可惜showbo的方法不能用在这个标准上 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      

  9.   

    tantaiyizu 的效果是厉害
    但我只需要那个覆盖层
    代码又是压过的找起来太头疼chinmo 的方法有滚动条的话就没用了
      

  10.   

    showbo那个position:fixed的使用还是第一次看到
    手册中也只是说
    fixed  :　 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 
    要找资料看看先如果再找个使ie6实现的方法就完美了
      

  11.   

    给你个示例，感觉比较简单一些。
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Demo</title>
    <style type="text/css">
    <!--
    *{
       margin:0;
       padding:0;
    }
    html,body{
       height:100%;
    }
    #shadow{
       position:absolute;　
       left:0;
       top:0;
       width:100%;
       height:100%;
       background-color:#0060C0;
       filter:alpha(opacity=20);
    }
    #box{
       position:absolute;
       left:50%;
       top:50%;
       width:400px;
       height:180px;
       margin:-90px 0 0 -200px;
       border:1px solid #84A0C4;
       background-color:#DFE8F6;
       text-align:center;
    }
    -->
    </style>
    <script language="javascript" type="text/javascript">
    <!--
    function createDiv()
    {
        var btnShow = document.getElementById("btnshow");
        btnShow.disabled=true;    var shadow = document.createElement("div");
        shadow.setAttribute("id","shadow");
        shadow.style.zIndex="10";    var box=document.createElement("div");
        box.setAttribute("id","box");
        box.style.zIndex="999";
        
        var spanUser=document.createElement("span");
        spanUser.innerHTML="User:";    var textUser=document.createElement("input");
        textUser.setAttribute("type","text");
        textUser.setAttribute("id","textUser");    var button=document.createElement("input");
        button.setAttribute("type","button");
        button.setAttribute("id","button1");
        button.setAttribute("value","Confirm");
        button.onclick=hideDiv;    box.appendChild(spanUser);
        box.appendChild(textUser);
        box.appendChild(button);    document.body.appendChild(shadow);
        document.body.appendChild(box);
    }
    function hideDiv()
    {
        var textUser=document.getElementById("textUser");
        var user=document.getElementById("user");
        user.value=textUser.value;    var box=document.getElementById("box");
        var shadow=document.getElementById("shadow");
        var btnShow=document.getElementById("btnShow");
        
        document.body.removeChild(box);
        document.body.removeChild(shadow);
        btnShow.disabled=false;   
    }
    -->
    </script>
    </head>
    <body>
    <div style="text-align:center">
    <input id="user" type="text" />
    <input id="btnshow" type="button" onclick="createDiv()" value="Display" />
    </div>
    </body>
    </html>
      

  12.   

    <style type='text/css'>
    .ddd{position:fixed; bottom:0;right:0; width:50px; height:50px; background-color:#0000FF;} 
    </style><div class="ddd">fasdfasdfasdfasdf</div>
    太好用了
    这样就实现了右下角的绝对定位
    不用再麻烦的模拟了
      

  13.   

    to chinmo 
    用你那个实现的话还要弄很多东西来模拟
    showbo那个加个position:fixed属性就搞定了
    你说哪个更好
    只是ie6不支持这个属性
      

  14.   

    showbo那个滚动条时，遮照层有一个闪动的效果
    但我那个是不会有闪动的
    就只不过是弹出的那个窗口没有随滚动条滚动但这个做起来非常简单吧不用多说你也知道怎么做
      

  15.   

    position:fixed是w3c标准来的，ie不支持郁闷，连文档规则都要考虑，看来难混啊应该是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">标准把css行为限制了
      

  16.   

    to showbo 
    ie7还是支持的啊
    只是ie6不行
    至少知道了position:fixed的用法
    谢谢了
      

  17.   

    ie6我还真的没试
    因为ie7中就已经不行了
      

  18.   


    你这个问题只需要加如
     function show(ele)
        {
          eval(ele + ".style.display = ''");
      document.getElementById(ele).style.height = document.body.clientHeight+'px';  document.getElementById(ele).style.width = document.body.clientWidth+'px'; 
        }这个函数改成这样基本就解决了
      

  19.   


    你那个设计的技巧在把宽和高设为100%来自适应
    现在你又把他们定死了
    那不是又用回我原来那个方法吗
    还需要在window.onresize中设一次
      

  20.   

    呵呵 ，你有没有发现showbo的那个也是一样吗？就像你说我的那个一样的效果反正我看他的在IE6下就出现了你说的那个效果
      

  21.   

    不过可以用来兼容ie6也够了
    谢谢chinmo 热心
      

  22.   

    showbo的那个也有你说的那个情况！！
      

  23.   

    如果showbo的那个可以不用window.onresize解决，那我的这个肯定也可以！
    就看你怎么取舍了
      

  24.   


    <style type='text/css'>
    .ddd{position:fixed; bottom:0;right:0; width:50px; height:50px; background-color:#0000FF;} 
    </style>如果你说的这个可以解决他的那个的话
    那么你把我的
    div#mbDIV
        {
          position: absolute;
          top: 0px;
          left: 0px;
      bottom:0;
      right:0; 
          width: 100%;
          height: 100%;
          background-color: #AAAAAA;
          z-index: 10;
          filter: alpha(opacity=80);opacity:0.8;
        }
    改成
    div#mbDIV
        {
          position: fixed;
          top: 0px;
          left: 0px;
      bottom:0;
      right:0; 
          width: 100%;
          height: 100%;
          background-color: #AAAAAA;
          z-index: 10;
          filter: alpha(opacity=80);opacity:0.8;
        }
    也能解决
    但也是不兼容IE6了
      

  25.   

    可能你看到的是没有应用position:fixed的
    因为我是把他的代码弄下来自己修改后看的效果
    也没留意他那个例子
      

  26.   


    就是那个position:fixed
    其实我一直就是说这个
    可能你没留意吧