Websitenizi ilk kez ziyaret edenler için duyuru yapmak veya e-mail kaydı almak için kapanabilir pencere yapımını anlatmaya çalışacağım. Burada yapılmışı var.Bu yazıyı hazırlarken kullandığım kaynaklar: yensdesignve simplexdesign‘dan.İlk once HTML sayfasına bakalım:Sayfanın başına başlık, css dosyası ve js dosyalarını ekleyelim
Sıra içerikte, ben basit bir içerik kullandım:

Bu örnekte e-posta kayıt formu herhangi bir veritabanına bağlı değil, örnek olsun diye orada duruyor.CSS dosyasını yensdesign sayfası 4. aşamadan yükleyebilirsiniz. Benim yaptığım değişiklikler şöyle:#backgroundPopup{display:none;position:fixed;_position:absolute;height:100%;width:100%;top:0;left:0;background:#000000;border:1px solid #cecece;z-index:1;}#popupContact{display:none;position:fixed;_position:absolute;height:150px;width:350px;background:#FFFFFF;border:2px solid #cecece;z-index:2;padding:12px;font-size:13px;}#popupContact h1{text-align:left;color:#6FA5FD;font-size:22px;font-weight:700;border-bottom:1px dotted #D3D3D3;padding-bottom:2px;margin-bottom:20px;}#popupContactClose{font-size:14px;line-height:14px;right:6px;top:4px;position:absolute;color:#6fa5fd;font-weight:700;display:block;}#textArea{padding-top:15px;}
Dikkat ederseniz popup penceresinin z-indexi popup penceresininkinden yüksek.Gelelim en önemli kısma, js dosyasına, burdan sonrasını dosyadaki yorumlar anlatıyor:/***************************///@Author: Adrian “yEnS” Mato Gondelle//@website: www.yensdesign.com//@email: [email protected]//@license: Feel free to use it, but keep this credits please!/***************************//****************************Translated to Turkish by Kamer Guzel***************************///SETTING UP OUR POPUP//POPUP DUZENLEME//0: popop aktif degil, 1: popop aktif;var popupStatus = 0;//jQuery magic ile popup penceresini aktif etme fonksiyonumuzfunction loadPopup(){//popup statusu sifir ise yani popup aktif degilse, popup penceresini yukluyoruzif(popupStatus==0){$(“#backgroundPopup”).css({“opacity”: “0.7”});$(“#backgroundPopup”).fadeIn(“slow”);$(“#popupContact”).fadeIn(“slow”);popupStatus = 1;}}//popup penceresini etkisiz hale getirme fonksiyonumuzfunction disablePopup(){//popup statusu 1 ise, yani popup aktif ise, popup penceresini etkisiz hale getiriyoruzif(popupStatus==1){$(“#backgroundPopup”).fadeOut(“slow”);$(“#popupContact”).fadeOut(“slow”);popupStatus = 0;}}//centering popup//popup penceresini ortalama fonksiyonumuzfunction centerPopup(){//request data for centering//ortalama icin veri talebivar windowWidth = document.documentElement.clientWidth;var windowHeight = document.documentElement.clientHeight;var popupHeight = $(“#popupContact”).height();var popupWidth = $(“#popupContact”).width();//ortalama burda basliyor$(“#popupContact”).css({“position”: “absolute”,”top”: windowHeight/2-popupHeight/2,”left”: windowWidth/2-popupWidth/2});//bu IE6 icin$(“#backgroundPopup”).css({“height”: windowHeight});}/*Fonksiyonlarimiz burada bitiyor, sira fonksiyonlari cagirdigimiz kontrollerde*///jQuery controlleri$(document).ready(function(){//POPUP PENCERESINI AKTIF KILMA//yalnizca yeni ziyaretciler icin:if ($.cookie(“yeniziyaret”) != “1”) {//ortaliyoruzcenterPopup();//yukluyoruzloadPopup();}//POPUP PENCERESINI ETKISIZ KILMA//Yeni ziyaretci sitemize uye oldu ise$(“#gonder”).click(function(){disablePopup();//ziyaretci yeniden anasayfaya gittiginde popup penceresini gormeyecek//bunun icin cerezi “1” yapiyoruz, alttaki kontrollerde de ayni seyi yapiyoruz//ziyaretci cerezleri temizlemez ise, bir ay sonra tekrar penceremiz ile karsilasacak. bu muddeti degistirebilir (30 yerine 7) veya hic kullanmayabilirsiniz.$.cookie(“yeniziyaret”, “1”, { expires: 30 });});//Sag ustteki X butonu ile sayfayi kapatti ise$(“#popupContactClose”).click(function(){disablePopup();$.cookie(“yeniziyaret”, “1”, { expires: 30 });});//Gri alana tikladi ise$(“#backgroundPopup”).click(function(){disablePopup();$.cookie(“yeniziyaret”, “1”, { expires: 30 });});//Escape tusuna basti ise$(document).keypress(function(e){if(e.keyCode==27 && popupStatus==1){disablePopup();$.cookie(“yeniziyaret”, “1”, { expires: 30 });}});});
Umarım yeterince açık ve faydalı bir yazı olmuştur.