DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 純CSS制作的網頁中的lightbox效果
純CSS制作的網頁中的lightbox效果
編輯:CSS詳解     
“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>
        <p>This 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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved