• light box特效(WINDOWS 关系对话框特效) - [网页技术]

    2008-04-27

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://sundry.blogbus.com/logs/19854360.html

    Lightbox的效果类似于WinXP操作系统的注销/关机对话框,除去屏幕中心位置的对话框,其他的区域都以淡出的效果逐渐变为银灰色以增加对比度,此时除了对话框内的表单控件,没有其他区域可以获取焦点。

     <html>
        <head>
            <style>
            .black_overlay{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: black;
                z-index:1001;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);
            }
            .white_content {
                display: none;
                position: absolute;
                top: 25%;
                left: 37%;
                width: 227px;
                height: 292px;
                padding: 0px;
                border: 16px solid orange;
                background-color: ffffff;
                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="white_content"><img src="http://35.com/images/newproduct.jpg" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></div>
            <div id="fade" class="black_overlay"></div>
        </body>
    </html>


    收藏到:Del.icio.us