Siteyle birlikte açılan jQuery Popup

Bu kod kadir a ‘nın Friendfeed üzerindeki jQuery popup ile ilgili bir bilgi soran şu yazdığı yardım isteğine (silinmiş bu feed) rastlamamla  ortaya çıkmış oldu. İyi de oldu. Bugün ofiste toplanması gereken iki adet masaüstü bilgisayar vardı. Onları bitirdiğimde biraz ar-ge çalışması 🙂 yaptım. Daha önceden elimde bulunan bir popup scriptini document.ready fonksiyonuyla birleştirme firkriyle bir adım da atmış oldum. Orasıyla burasıyla oynayınca istediğim gibi de ortaya çıktı. Şimdi bunu nasıl yapabileceğinizi anlatmaktan memnuniyet duyacağım. Başlayalım…

Öncelikle açılışta siteyle beraber yüklenen javascript popuplar uzun zamandır bizimle birlikte ama kimi farklı pencerede kimi de rahatsız edici derecede kötü oluyor. jQuery nin hayatımıza girmesiyle birlikte bu işleri yapmak ve insanları rahatsız etmeden site içinde kullanmak daha basit bir hal aldı. İşte aşağıda anlattığım şekilde bunu başarabilrsiniz.

Öncelikle HMTL sayfamızı oluşturalım. Burada yukarıdaki yazıda belirtmiş olduğum document.ready komutu ile çağırma işlemini yapıyoruz. O satırları ayrı bir şekilde işaretledim. Aşağıda javascript dosyasındaki ile karıştırmayın. Burada sitenize eklemeniz gereken alanlar popupContact ve backgroundPopup adlı div alanları. Bunları da işaretledim. Bu kodlar ile açılacaktır Popup. Yapmanız gereken şey işaretli alanlardaki divleri olduğu gibi sitenizde açmak istediğiniz yere eklemek. Tabii css ve javascript dosyalarını da entegre etmeyi unutmadan 😀

jQuery popup kodu

Sonra da siteye eklediğimiz popup.js özelliklerine göz atalım. Unutmayın ki javascript dosyasını ben yazmadım. Sadece ona uygun olarak bazı değişiklikler yaptım.

jQuery popup javascript dosyası

Popup sisteminin aktifliğini belirleyelim.

Yükleme ve devredışı bırakma komutları

Ortalayalım…

E tabii yükleme safhasında olacakları belirleyelim. Buradaki document.ready bir butona tıklama durumunda kullanılabilecek düzeyde hazırlanmıştı. Benim kullandığım fonksiyon HTML dosyasında. Yazdım yukarıda.

Sonrasında CSS dosyasını irdeleyelim. Burada kodlarla ilgili body için de düzenleme yapmıştım. Siz ihtiyacınıza göre cssleri sitenize ekleyebilirsiniz.

Bir günlük Çerez bırakarak açmak

Aşağıdaki bir ve birden çok yoruma istinaden çok sorulan bir soruyu da yanıtlayayım böylelikle. Popup u çerez kullanarak günde bir kere açmak için aşağıdaki scripti /head alanından önce ekleyin. Bu kodu eklediğinizde lütfen ilk kodda paylaştığım document.ready içeren scripti tamamiyle kaldırın. Çerez kodunun çalışmama ihtimali var kaldırmazsanız. Buna ek olarak ilk verdiğim cookie kodu çalışmamıştı. Bundan dolayı özür dilerim. Ancak çalışan bir tane yazmayı başardım. Kodda çok bir değişiklik göremeyebilirsiniz ancak ek olarak body alanına bir adet onload kodu eklemeniz gerekmekte. Bunu da kodun altına ekledim.

Not: Ekteki dosyada bu verdiğim kodu bulamazsınız. Onun için buradan kopyalayıp yapıştırın lütfen.

body alanına onload olarak eklediğinzde şu şekilde görünmesi gerekir.

Örneğe bakalım 🙂 tıklayın bu yazıya.

Bir kere açılan örneğe bakalım :).

Örneklerde de nasıl çalıştığını görebilrisiniz. Eğer kafanıza yatmayan bir kısım varsa yorum bırakabilirsiniz. En kısa sürede size cevap veririm.Örnekteki Dosyaları indirmek için aşağıdaki indirme linkine tıklayın.

Hadi Selametle…

Dosyayı Ek Alanından İndiriniz

 

Gelen Aramalar:

  • cihan kizilaslan script
  • sayfa yüklendikten sonra açılan popup
  • Hakan

    Hocam, emeğine sağlık. Çok teşekkürler. Harika bir paylaşım.

  • Hakan

    Hocam peki bu POPUP penceresini 1 kez görünecek şekilde nasıl tasarlayabiliri. Şöyle ki;

    X kullanıcı benim sayfamı açtı, bu POPUP ı okudu ve kapattı, bir daha benim sayfama girince bu POPUP ı görmesin. Yani bir kere okusun ve TAMAM ı tıklayınca bir daha girişinde görmesin.

    • Hakan,

      Öncelikle teşekkür ederim yorumun için. Onu sanırım Kullanıcılarına sayfana girdiğininde bir tarayıcı çerezi (cookie) bırakırsan ve bunu zamanlama olarak düzenlersen cookie okunup sadece bir kere görünmesi sağlanabilir. Bu konuda ben bi değişiklik yapmadım ama bu mantıkla sen arama yapabilirsin. bunun uygulama sıkıntısı olmaz sanırım.

  • Merhaba Serkan,
    <a href="http://www.sunsmilesolarium.com” target=”_blank”>www.sunsmilesolarium.com adlı siteme kampayalarımı öncelikli göstermek için bu pop up ı kurmak istiyorum fakat ne yapsam olmadı.

    sitemi template editleterek yaptım.herşey çalışıyor fakat bu bir türlü olmuyor.

    bana yardımcı olabilir misin? gerçekten çok ihtiyacım var 🙁

    • Selam Berkin,

      Sanırım popup u çağırırken gerekli bir alanı atlıyorsun. Aşağıya eklediğim alanı kodlarını yazarken eklemezsen otomatik olarak pop up gelmez.
      <code>
      < script>
      $(document).ready(function(){
      centerPopup();
      loadPopup();
      });
      </ script>
      </code>

  • Alaattin Özkan

    Merhablar bu oluşan popup otomatik geldiği gibi otomatik nasıl kapatabiliris yani 5 sn kapatmasını nasıl saglaya biliriz.

    • Araştırıp buraya yazacağım arkadaşım. Belki bir timer atayabiliriz. Kodu tekrar kontrol edip haber vereceğim

  • Selam Alaattin çözüm aşağıda 🙂

    <code>

    $(document).ready(function(){

    centerPopup();

    loadPopup();

    });

    </code>

    Bu kodun bulunduğu yeri aşağıdaki gibi değiştirirsen 5 saniyede kapanan bir popup a sahip olacaksın. :))

    <code>

    $(document).ready(function(){

    centerPopup();

    loadPopup();

    setTimeout(function(){$("#backgroundPopup").fadeOut("slow");$("#popupContact").fadeOut("slow");popupStatus = 0; }, 5000);

    });

    </code>

  • Alaattin Özkan

    Teşekur ederim Arladaşım

    • Alaattin,

      <pre>
      <code>
      <script>
      $ (document).ready(function(){
      centerPopup();
      loadPopup();
      });
      </script>
      </code>
      </pre>
      alanını kaldırıp <code>a href="#" id="button" rel="nofollow">tıkla /a></code> eklerseniz istediğiniz gibi olacaktır. (boşlukları ben ekledim ve parantezleri kaldırdım . kodlar görünmeyecekti yoksa)

  • Hakan

    Siteyle birlikte açılmasın da linke veya bi resme tıklayınca o pop up çıksın. bunu nasıl yaparız kardeş?

  • Tunahan

    Tam aradığım örnek, zip dosyası bozuk görünüyor, yeniden paylaşırsanız sevinirim. Elinize sağlık, hakkaten aramayla zor bulunan, Türkçe içeriğin az olduğu bir noktada uygulama yapmışsınız.

    • Tunahan benim baktığım kadarıyla dosyada bir sıkıntı yok, ama tekrar indirdim dosyayı şimdi. Yeniden düzenleme yapıp göndereyim sunucuya. Sana da e-posta yoluyla iletiyorum. İlgine ve yorumuna teşekkür ederim.

  • Cihan KIZILASLAN

    Peki bu jquery kodlarını flash içine gömebilir miyiz? swf açıldığında otomatik popup açılıcak şekilde?

    • Cihan, Flash ile pek jquery kodlarına gerek kalmaz sanırım. Flash tasarımı yapmadığım için ne desem yalan olur şu anda.

  • Silentscream46

    Merhaba Çok teşekkürler Bu Tasarmınız için Vbulletinde bir tek bu çalıştı sorunsuz Forumu Sola yasladı ama ama css den hallettim Yalnız benim sormak itediğim cokie ekleyebilirmiyiz buna her kişiye 1 kez görünsün yada günde bir kez gibi   teşekkürler

    • Slientscream yukarıdaki css içinde body gibi tanımalar da olacaktı. Ondan sola yaslamış olabilir. Ayrıca bir çerez kullanarak bunu halledebilirsin. javascript ile. yukarıda document ready alanını değiştirmen yeterli.  Yazıya kodu ekliyorum.

  • Teşekkür ederim.  Denemeye vaktim olmamıştı cookie kodunu tam anlamıyla. Kadı kızı durumu olması doğaldır sanırım :)) En sondaki kodu kaldırırsan çalışacaktır büyük ihtimalle. Paylaştığım koddan kaldırıyorum o kısmı. (Tabii dreamweaver cookie destekliyor mu onu da bilmyorum. Notepad++ forever)

  • Yaptım çalışan halini. Düzenliyorum birazdan yazıyı…

  • Cesarettin Zeytin

    Teşekkürler. Uygulaması gayet kolay ve işe yarıyor. Eline sağlık. Lakin IE hatası beni çok uğraştırdı. Sen git popup içine eklediğim iframe'e bağlı saydadaki hata yüzünden popup'ı çalıştırma. Yok kardeşim olmaz öyle şey dediğini duyar gibiyim. Lakin oluyormuş 🙂

     Bu arada cookie için expires'ı nereden belirtebiliriz onu göremedim. 1 month, 1 week vs gibi. Şu an ne kadar süre gösteriyor falan açıkcası anlamadım. Ya da artık gerçekten kafam basmaz bir haldeyim 🙂 Neyse.. Tekrar çok teşekkür ederim. Saygılar.

    • Ben tesekkur ederim. setcookie alanindaki "1" bir gune esittir. Onu degistirebilirsiniz

  • Cenk

    Ellerine sağlık. İkinci kez işime yaradı.
    Emeğin için teşekkür ederim.

    • Ben teşekkür ederim Cenk. Eklediklerim işinize yaradıkça mutlu oluyorum. 🙂

  • Emregp

    çok teşekkürler. Allah işini rast getirsin

  • Ender

    Merhaba öncelikle paylaşım için teşekkür ederim. Ekledim ancak şoyle bir sorun oluştu sanırım diğer kodlar ile çakıştı ve popup arka planda kaldı bunu nasıl çözebiliriz

    • Popup arka planda kaldı derken? Ön kısımda kalan obje aslında popupun içinde mi olmalıydı? z-index problemi var gibi görünüyor.

  • Emre

    Elinize sağlık.

    Bir sorum olacak size popup herşeyden üste olabilme durumu var mı? Slider döndüğünde karartmanın üstüne çıkıyor.

    Teşekkürler.

    • Teşekkürler

      Tabii ki, #backgroundPopup içindeki z-index değerini sitenin en üstünde çıkartmak istiyorsan orada yazan 1 değerini 9999 a kadar çıkartabilirsin. Hala içerik arkada kalıyorsa şayet aynı işlemi #popupContact (z-index burada atanmamıştır) içerisine de ekleyebilirsin.

  • Pingback: Programlama’dan küçük küçük notlar | Ahmet Müngen()

  • Halil

    Linkte Hasar var indiriyorsun açmak istediğinde hata alıyorum. Kontrol eder mısın

    • Halil Tekrar Dener misin? Dosyayı yeniden yükledim. Açıldığında üst bilgisi bozuk diyebilir, o sadece uyarıdır. Diğer dosyaları çıkartmana izin veriyor.

  • erhan

    eyvallah çok teşekkürler.

  • BGunduz

    Birçok saçma sapan popup'tan sonra bu çok iyi geldi 🙂 Teşekkürler. Çok şık bir popup. Ve çalışan bir kod 🙂

    • Beğendiğinize sevindim. Güle güle kullanın 🙂

      • merhaba serkan bey popupun sadece bir sayfada çıkması için ne yapılmalı acaba?

        • checkCookie fonksiyonu olan body onload alanını WordPress'in is_page fonksiyonuyla birleştirmelisiniz. Yani <code>if(is_page('id veya kısa isim')) {echo } else {} </code> gibi

  • Ercan Delican

    Kodlama çok hoş gerçekten ama şöyle bi isteğim olacak; popup'un açıldığı yer anasayfa üzeri olmasını istiyorum. Yani arkaplanda anasayfa olsun. Kapattığımda anasayfa çıksın karşıma istiyorum. Mümkün mü?

    • Ercan bey,

      #backgroundPopup alanında bulunan z-index değeri anasyfanızın body değerinden büyük olmalıdır. şu an ki durun z-index:1; olması lazım. bunu z-index:99; gibi bir değerle değiştirirseniz bu sorunu çözmüş olursunuz.

  • Ümit Yal&ccedil

    Merhaba, gerçekten çok basit ve kullanışlı bir eklenti olmuş. Fakat otomatik kapanma süresini nasıl uzatabilirim.

    • Ümit bey merhaba,

      Popup üzerinde otomatik olarak kendini kapatma süresi bulunmamakta. Ancak normal şartlarda 1 günlük çerez bırakarak 24 saat boyunca kapalı kalabiliyor. Onu uzatmak isterseniz setCookie fonksiyonunda bulunan "1" değerini yükseltmeniz yeterli olacaktır.

      • Ümit Yal&ccedil

        Neredeyse tüm tarayıcılarda denedim fakat otomatik olarak 5 sn kadar sonra kapanıyor Serkan bey

        • Örnekteki alanda bi değişiklik yapmışım 🙂 Bir ara indirme sorunu olmuştu. Yeni dosyalar oradan son değişiklği de içermekte. Doğrudur. İndirdiğiniz örnekte $(document).ready fonksiyonunda bir setTimeout alanı var. Onun sonunda bulunan 5000 ibaresi 5 saniyeye denk gelir.

          Onu değiştirir ve yükseltirseniz sorununuz düzelir. 5000 milisaniye olarak belirtilmiştir.

          • Ümit Yal&ccedil

            Teşekkürler. Cookie için verdiğiniz script hata verdi.
            (29. satır)
            if (a!=null && a!="")

          • Ümit Yal&ccedil

            Serkan bey, son olarak cookie de hata var sanırım. if (a!=null && a!="") satırında syntax hatası veriyor. İlginiz için teşekkürler.

          • Cookie (bir kere açılan örnek) alanındaki kodu alabilirsiniz. Sistem olarak çalışıyor.

  • Yakup TAŞLIBEYAZ

    Merhaba; #popupContact olan divimizin dışında kalan yerlere tıklamayı nasıl engelelme yapabiliriz. Buun İçin Yapmam gereken Editleme nasıl Olmalı

    • Javascrip dosyası içerisinde bulunan aşağıdaki alanı silin //Click out event!
      $("#backgroundPopup").click(function(){
      disablePopup();
      });

  • franqestion

    hocam konu içerisindeki kodunuzu örnek olarak veridğiniz birkere açılan script kodu ile güncellermisiniz. ordaki kod çalışıyor konu içersindeki çalışmıyorda.

    • franestion, cookie kodunu ayrı olarak verdim. Yazının en sonunda bulabilirsin o kodu. Buradaki amaç ilk etapta bir kere açılan popup değil. Siteyle birlikte açılmasını sağlamaktı.

  • Merhaba Bilal,

    Eğer herşeyi doğru olarak uyguladıysan örnektekinden pek de farklı olmuyor sistem. ESC tuşuna basıldığında, popup'un arkasında bulunan alana tıklandığında ve popup üzerindeki çarpı işaretine tıklandığında kapanması için ayarlı zaten. orada herhangi birşeyi atlamış olma ihtimalin var mı? Bir kontrol edebilir misin?

  • Tunna Bulutlu

    lütfen yardım edin dosyayı indirdim ama popup un 1 kere acılması için neyi indiricem veya yazıda ne yapcam anlayamadım bi, turlu

  • emre

    Merhaba, öncelikle çalışmanızdan dolayı tebrik ediyorum, güzel bir anlatım ve kodlama olmuş.
    Sormak istediğim şey ise;
    benim sitemin content(içerik alanı) ise sitenin ortasına hizalı, fakat sizin kodları eklediğim zaman sitemin içerik alanı sola dayalı oluyor, sebebi ve düzeltme yolu nedir acaba.
    İyi günler.

    • Emre,

      demo koduna hiç müdahale etmeden css dosyalarını vb aldıysan, o kodların içinde html reset kodları da vardır. Ondan sola yaslı olmuştur. #backgroundPopup ile başlayan alandan sonarsını eklersen sitene ve öncesini kaldırabilirsen sıkıntı kalmayacaktır.

  • Veysel Mahmutoglu

    Serkan Bey Merahabalr
    Benim farklı bir sorum olacak biraz ama 🙂
    popup içindeki yazı kısmını silip yotube den aldığımız bir videoyu embed yaptım video gelmedi ( intro gibi bişey yapmak istedim ama olmadı??
    Bu konuda yardımcı olabilir misiniz lütfen. Teşekkürler

    • Veysel bey,

      İletişim alanını kullanarak yaptığınız işlemi tam şekilde anlatan (mümkünse ekran görüntüsüyle) şekilde gönderebilir misiniz? Normal şartlarda embed, iframe gibi durumlar popupContact divi içerisine eklendiğinde çalışacaktır.

  • Çok güzel bi uygulama, çok yardımcı oldunuz teşekkür ederim.

  • delikanli53

    Tek kelime SÜPER bu arada wp değil de html sayfaya entegre ettim süper oldu.

WordPress gururla sunar.Theme: Flat by YoArts. WpAdamı Uyarlaması : Serkan Algur