菜鸟问个小问题


就是这种效果，打开一个div什么的，后面的标签全部灰化，只能点击这一个小窗口，很多登录，注册，都用这种效果，这个怎么能做出来呢？最主要是想问问怎么让背景灰化，点不到

解决方案 »

  1.   

    在js里未调用的时候不更改style或者class属性，调用的时候开始改..
      

  2.   

    用z-index属性把页面div分为3层，一层是正常页面显示的内容，然后再打开小div窗口的时候在这2个div层中间在+1层div，吧这层div的背景色设置为灰色全屏显示，好像就可以了，还可以在这层灰色的div上添加一些处理事件的
      

  3.   

    你说的就是一个弹出模式div吧
    http://download.csdn.net/detail/s478853630/4159478
    不妨一试
      

  4.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <script type="text/javascript">
    function openDiv() {
    document.getElementById("div1").style.display = 'block';
    document.getElementById("div1").style.filter = 'alpha(opacity=30)';
    document.getElementById("div2").style.display = 'block';
    }
    function closeDiv() {
    document.getElementById("div1").style.display = 'none';
    document.getElementById("div2").style.display = 'none';
    }
      </script>
     </head> <body>
       <div style="z-index: 0"><input type="button" onclick="openDiv()" value="添加用户"/><input/></div>
       <div id="div1" style="position: absolute; z-index: 1; display: none; background-color: gray; width: 100%; height: 100%; top: 0; left: 0; filter:alpha(opacity=30);"></div>
       <div id="div2" style="position: absolute; z-index: 2; display: none; width: 300px; height: 60px; top: 100px; left: 100px; background-color: blue;">
    <input id="username"/><input type="button" onclick="closeDiv()" value="确认"/></div>
     </body>
    </html>