Lightbox in CSS

Friday, 13 March 2009 18:12

ကြၽန္ေတာ္ Lightbox Effect ကို java script မသုံးပဲ CSS နဲ႔ တင္ control လုပ္ခ်င္တာ၊ အဲဒါကို googling လုပ္ရင္ ေတြ႔လာတာေလးကို

ျပန္ share လိုက္ပါတယ္။ ေအာက္က code ေလးကိုကူးျပီး html နဲ႔ save ျပီး စမ္းၾကည့္လို႔ရပါတယ္။ css ကလည္း web developer

ေတြအတြက္ လက္နက္ေကာင္း တစ္ခုပဲဗ်ိဳ႕။

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>LIGHTBOX EXAMPLE</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;

        }
    </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>