背景变暗弹出对话框的html/js代码

Check it:

<html>
    <head>
        <title>EXAMPLE</title>
        <style>
        .overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%; 
            width: 100%; 
            height: 100%; 
            background-color: gray; 
            z-index:1001; 
            -moz-opacity: 0.8; 
            opacity:.80; 
            filter: alpha(opacity=50); 
        } 
        .content {
            display: none;
            position: absolute;
            top: 25%; 
            left: 25%; 
            width: 50%; 
            height: 50%; 
            padding: 16px; 
            border: 16px solid blue; 
            background-color: white; 
            z-index:1002; 
            overflow: auto; 
        } 
        </style>
    </head>
    <body>
        <p>灰化背景
        <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">点击</a>打开窗口
        </p>
        
        <div id="light" class="content">
        弹出窗口的内容写在这里。点击<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">X</a>这里关闭窗口
        </div>
        <div id="fade" class="overlay"></div>
    </body>
</html>

 

posted @ 2011-09-18 15:28  super119  阅读(597)  评论(0)    收藏  举报