求助：注册页面效果如何达成

目前有很多网站，在注册或发送信息时，会在屏幕正中弹出一个div窗口，这时候后面的网页就成灰色，而且不能操作了，请问这个效果是如何做出来的呢？？

解决方案 »

  1.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    #overlay{position:fixed;top:0;left:0;width:100%;height:100%; background:#000;opacity:0.5;filter:alpha(opacity=50);z-index:10;display:none}
    </style>
    </head>
    <body>
    <div id="overlay" style="display:none"></div>
    <input type="button" value="click me" id="c" />
    <script>
    document.getElementById('c').onclick = function(){
    document.getElementById('overlay').style.display = 'block';
    };
    </script>
    </body>
    </html>用个div层就行了
      

  2.   

    那个所谓的层 就是个div就是了 写了个小例子 就是这么个效果
    <html>
        <head>
            <title>层</title>
            <style type="text/css">
    .el-mask {
        z-index: 20000;
        position: absolute;
        top: 0;
        left: 0;
        -moz-opacity: 0.5;
        opacity: .50;
        filter: alpha(opacity =     50);
        background-color: #CCC;
        width: 100%;
        height: 100%;
        zoom: 1;
    }
    </style>
            <script type="text/javascript">
      
      
    </script>
        </head>
        <body>
            <div>
                <input type="text" id="dd" name="ddd">
            </div>
            <div id="ddd" class="el-mask"
                style="display: block; z-index: 8000; width: 1152px; height: 580px;" />
                <div>
                    <br>
                    <br>
                    <br>
                    <input type="text" id="ddddd" name="ddddd">
                </div>
            </div>
        </body>
    </html>