Lightbox Effect [Tips & Tricks]

ET · 1 Lightbox Effect [Tips & Tricks] 20th May 2009, 7:15 pm

ET

Moderator

စုစုပေါင်းရေးသားချက်များ : 581
တည်နေရာ : Nay Pyi Taw
မှတ်ပုံတင်သောနေ့ : 2009-04-24
ကျေးဇူးတင်ခံရမှု : 49
ဖိုရမ် အကျိုးဆောင် ရမှတ် : 1281
သတိပေးခံရမှု : သတိပေးခံရမှု မရှိသေးပါ

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

ပြန် share လိုက်ပါတယ်။ အောက်က code လေးကိုကူးပြီး html နဲ့ save ပြီး စမ်းကြည့်လို့ရပါတယ်။ css ကလည်း web developer တွေအတွက် လက်နက်ကောင်း တစ်ခုပဲဗျို့။

Code:: .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; } This is the main content. To display a lightbox click [url=http://www.myanmaritresource.info/javascript:void(0)]="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here[/url] class="white_content">This is the lightbox content. [url=http://www.myanmaritresource.info/%3Cbr]"javascript:void(0)" onclick ="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close[/url] class="black_overlay">

ဒီ code မှာကြည့်မယ်ဆိုရင် opacity က browser မှာ ဘယ်လောက် အမှောင်ချမယ် ဆိုတာကို ပြောတာပါ။ ဒီ code သုံးခုက Browser

compatible အတွက် ရေးထားတာပါ။ တကယ်တော့အတူတူပါပဲ။

-moz-opacity: 0.8;

opacity:.80;

filter: alpha(opacity=80);

နောက်တစ်ခုက z-index ပါ။ element တွေရဲ့ stack order ကို control လုပ်ဖို့ပါ။ ဥပမာ ဒီ sample မှာ ကြည့်မယ်ဆိုရင်

black_overlay ရဲ့ z-index က 1001, white_content ရဲ့ z-index က 1002 ဒါကြောင့် white_content က black_overlay ရဲ့

ရှေ့မှာပဲ အမြဲပေါ်ပါလိမ့်မယ်။

ကျန်တာတွေကတော့ သိပ်မထူးခြားတဲ့ CSS element လေးတွေပါ။

1 Lightbox Effect [Tips & Tricks] 20th May 2009, 7:15 pm

ET