实现弹出窗口隐藏显示背景变暗效果

文西，我是零零漆。
能不能给解释详细一点啊

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style>
    #div_opacity{background-color:#000000; width:1000px; height:1000px; position:absolute;top:0;left:0; filter:alpha(opacity=40); opacity:0.4; z-index:1;display:none;}
    #div_input{background-color:#ffffff;width:300px;height:200px;position:absolute;top:200px;left:200px;z-index:2;display:none;}
    </style>
    <script>
    function showDiv(){
    div_opacity.style.display="block";
    div_input.style.display="block";
    }
    function hideDiv(){
    div_opacity.style.display="none";
    div_input.style.display="none";
    }
    </script>
    </head>
    <body>
    <div id="div_opacity"></div>
    <div id="div_input">
    <a href="javascript:hideDiv();">关闭</a>
    </div>
    <input type="button" onclick="showDiv()" value="显示">
    </body>
    </html>