ABT JS + CSS Popup Kutusu
Bir onceki paylasimimda bahsetmistim bir suredir izmirlife.org ile ugrasiyorum. Rehbere kayitli firmalarin ayrintilarini sik bir sekilde gostermeyi planladim ve bunu JS + CSS kullanarak kendim hazirladim.

Hazirladigim seyin mantigi Javascript kisminda sadece eleman goster / gizle olarak calismasi.

CSS'de ise sadece renk, siklik katmak.

Mantik olarak gayet basit aslinda. Sadece biraz zorda kalmak ve dusunmek gerekiyor (: Tabii ki eksiklikleri ve hatalari yok degil ama su an icin isimi goruyor ve baskasini kullanmayi da dusunmuyorum. Zaten kendinizin ugras vererek yarattigi birsey dunyanin en guzel seyi olur sizin icin.

Eksiklik dedim peki nedir bu derseniz, Lighbox Gone Wild isimli eklenti Lightbox'in gelistirilmis ve icerik gosteren versiyonu. Fakat dinamik olarak gosteriyor yani sizin belirlediginiz HTML, ASP, PHP vb. uygulamalari otomatik olarak acilan kutuda gosteren birsey. Fakat maalesef hazirladigim eklenti daha sabit. Sadece belirli seyi gosteriyor. Bu sorunuda simdilik iframe ile cozebilirsiniz.

Gelelim kodlamamiza, ilk etapta bir js sayfasi hazirliyoruz:

abtlb.js
function hide(elementID){
document.getElementById(elementID).style.display = "none";
}
function show(elementID){
document.getElementById(elementID).style.display = "";
}


Daha sonra acilan kutumuzun sekilli gorunmesini saglayan css kodlarimiz icin gerekli sayfamizi olusturuyoruz:

abtlb.css
#ABTLb {position: absolute;height: 1px;margin: 0;font-size: 0;width: 100%;height: 100%;background: #000;z-index: 10050;opacity: .95;filter: progid  XImageTransform.Microsoft.Alpha(opacity=95);}
#ABTLbIc{width: 500px;height: 300px;background: #fff url(../beyaz.gif);padding: 10px;margin: 150px auto;}


son olarak HTML sayfamizi duzenliyoruz:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="TR" xml:lang="TR"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<meta http-equiv="Content-Language" content="tr" />
<title>ABT Lb v1.0</title>
<link href="abtlb.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="abtlb.js"></script>
</head>
<body>
<a href="#" onClick="JavaScript: hide('ABTLb1'); show('ABTLb2');"><b>ABT Lb:</b> Denemek icin tiklayiniz..</a>
<div id="ABTLb1">
</div>
<div id="ABTLb2" style="display:none" class="ABTLb">
<div id="ABTLb" onClick="JavaScript: hide('ABTLb2'); show('ABTLb1');">
<div id="ABTLbIc">ABT Lb v1.0<br/>Iyi gunlerde kullanmaniz dilegiyle!
</div>
</div>
</div>
</body>
</html>


Iste aslinda bu kadar basit. Iyi gunlerde kullanmanizi dilerim..

ornegi gormek icin tiklayiniz.
February 14, 2009
Ayberk Atasay
Javascript/Ajax
4 yorum