<<  快速排序法(Quick Sort) | 首 页 | 插入排序法  >>

  • 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>


    随机文章：

    讨厌出差 2009-11-04
    插入排序法 2008-04-29

    收藏到：Del.icio.us




    Tag：
    引用地址：
    xings 发表于10:42:10 | 编辑 | 继续话题 | 转发 | 分享　0