Bilgiler
  • Ekleyen:
  • Ayberk Atasay
  • Tarih:
  • February 14, 2009
  • Kategori:
  • Javascript/Ajax
  • Paylas:
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.
Yorumlar
  • Eski Yorumlar:
  • enes
  • evet basit de biz biraz yeniler icin bikac dk lik videolar olsa sesli cok guzel olur yani anlatisiniza guvendigim icin dedim yosa baska yerlerde de var.Fakat bu vidyo isi sizi gelistirebilir...
  • 2009-03-06 16:09:20
  • zafer
  • ayberk bey saolun guzel paylasim fakat bunu ben sayfa acildiginda otomatik acilmasini ve 10sn sonra kapanilani yapmak istiyorum.Ayrica resime tiklanildiginda resimin buyultulmus halini acmak istiyorum.Nasil yapabilirim.Tesekkurler.
  • 2009-05-30 02:20:20
  • Ayberk Atasay
  • @zafer o dediginle ilgili ornekler var. bu yazilimlari bulup kullanimini anlatabilirim. resime tiklaninca buyuyen diye istedigin sey: Lightbox. bu sekilde internette aradiginda bulabilirsin.
  • 2009-05-30 20:35:19
  • zafer
  • Tesekkurler lightboxu buldum bi kac duzenleme yaparak kullaniyorum.Ornekleri de umarim en kisa zamanda anlatirsiniz.
  • 2009-05-31 22:06:50