纯CSS制作的网页中的lightbox效果

【 tulaoshi.com - Web开发 】

　　“Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多js版本的介绍。不过都下载一个lightbox的js小则几十K，大则上百K。如果你只是需要一个类似Lightbox的效果，这种百分之百纯CSS制造，不含js的办法倒是可以试试。

以下是引用片段：
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
    head
        title纯CSS Lightbox效果/title
        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: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    /style
    /head
    body
        pThis is the main content. To display a lightbox click a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"here/a/p
        div id="light" class="white_content"This is the lightbox content. a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"Close/a/div
        div id="fade" class="black_overlay"/div
    /body
/html