jQuery popup eklentisi v2

jQuery popup eklentisi v2’de güncelleme yapılmıştır Son güncelleme tarihi : 13.05.2011

Cookie’li popup uygulaması için buraya tıklayınız.

Merhaba arkadaşlar uzun bir süredir düzgün bir paylaşım yapamıyordum, tembelliği üstümden attım ve yoğun istek üzerine ilk yazdığım jquery popup uygulamasını yeniden yazdım ve eklenti haline getirdim.

abPopup ön izleme

Yenilikler neler ?

1 – Açılış

İstenilen butona tıklayınca açılma veya otomatik açılma.

Popup’un pozisyonunu belirleme, bu kısımda iki seçenek var 1 ortala, orta 2 ortala,top,100px

Arka planda renk ve opacity ayarlama

2 – Kapanış

İstnilen butona tıklayınca kapanma

Esc ye basında kapanma

Arka plana tıklayınca kapanma.

Kullanım kolay mı ?

Evet kullanımı çok kolay.

Yapmanız gerekenler ;

1- İndirdiğiniz dosyayı ftp’nize atmak,
2- Css/js dosyalarını sayfanıza ekmek,
3- Popup’u koyacağınız sayfaya 2 ufak ekleme yapmak.

3.a Html taglarını kendinize göre düzenleyip sayfanıza yerleştirmek

3.b script tagları arasında eklentimizi çağırmak

Tüm işlemler bu kadar.

Eğer profesyonel bir kullanım istiyorsanız eklentimizi çağırırken kendi özelliklerinize göre eklentiyi çağırabilirsiniz.

Detaylı Kullanım

Demo 1 = Tıklama ile ortalanmış bir şekilde açılma,

Demo 2 = Otamatik açılış ve arka plan değiştirme,

Demo 3 = Tıklama ile açılış, arka plan değiştirme, top değerini belirtme.

“jQuery popup eklentisi v2” üzerine 81 yorum

  1. Bir çok alanda insanların ihtiyaç duyduğu bir uygulamaya Türkçe çözüm 🙂 jQuery pluginleri yavaş yavaş Türkçeleşiyor. Bu güzel bir şey bizim yazılımcılarımız da var demeye başladık

  2. Paylaşımlarınız ve katkılarınızdan dolayı tşk ederim. çok işime yaradı kardeş. tekrar tşkler

  3. kardeş sayfamda başka jsler ve swf dosyalar var, popup uglaması tek basına bi sayfada çalışıyor, fakat aynı şekilde benim sayfaya ekleyince çalışmıyor, bi çakışma söz konusu ama bulamıyorum bi önerin varmı?

  4. Öncelikle çok teşekkür ederim kodlar için. benim sormak istediğim bir sorun var bu popup da arka plan alanını nasıl %100 yaparız bazı sayfalarda altta içerik olmasına rağmen siyah alan belirli bir yere kadar geliyor da.

  5. Öncelikle ilginiz için ben teşekür ederim Osman bey.

    Ben ekran boyutuna göre yaptım arka plan ayarlamasını. Siz body’nin boyunu alıp arka planı ona göre uzatabilirsiniz.

  6. Hangi dosyada tutuluyor acaba bu boyutlar css dosyasında height ile ilgili bir bilgi göremedim de.

  7. merhabalar, popup uygulamanızı kullanıyorum gayet kullanışlı ve güzel, öncelikle böyle bir uygulama yaptığınız için teşekkür ediyorum. Kullandığım popup, sayfa açılışında açılan popup.. Yalnız şöyle bir sorunum var. Popupun hemen alt kısmında youtube dan çektiğim bir video duruyor ve o video popupun üstüne çıkıyor. Yani video popupun öne çıkmasını engelliyor. Bunu nasıl düzeltebilirim?

  8. Hocam iframe kodu yukarıdaki gibi.. Senin dediğin vmode=”transparent” ekledim ama değişen bir şey olmadı…

  9. Devrim youtube’in yapısını bilmiyorum ama flash’lara transparanlık verirsen sorun çözünülür. En dış’da frame varsa ona z-inde vermeyi dene ?

  10. var sure = 10;
    function Kontrol() {
    sure = sure – 1;
    $(“#suresayac”).text(sure);
    if (sure > 0) setTimeout(“Kontrol()”, 1000);
    }

    $(document).ready(function () {

    jQuery(‘#popup1’).abPopup({
    ‘acilis’: ‘otomatik’,
    ‘pozisyon’: ‘ortala,ortala’,
    ‘arkaplan’: ‘#000’,
    ‘arkaplanSaydam’: ‘0.6’,
    ‘htmlTag’: ‘.ab-kapat’,
    ‘siyahCerceve’: true,
    ‘esc’: true
    });
    Kontrol();

    if (jQuery(‘#abPopup’).show) {
    setTimeout(function () {
    jQuery(‘#abPopup’).delay(100).slideUp(‘fast’);
    jQuery(‘#ab-popup-kararti’).delay(0).fadeOut(‘fast’);
    jQuery(‘#ab-popup-kararti’).remove();
    }, 10000);
    }

    });

  11. Çalışma güzel olmuş ama bu çakışmayı nasıl düzeltebiliriz. Benim web sitemde jquery olarak kullandıgım banner geçişli bir slade var. Bu uygulama ile kullandıgımda popup calısıyor popup’u kapattıktan sonra diğer jquery calısmıyor. Bunu nasıl düzeltebilirim yardımcı olurmusunuz.

    1. Serkan çakışmalar için en basitinden jquery dosyalarının yerlerini değiştir slider’i alta al vs eğer olmazsa benim yazdığım bir slider kullan.

  12. Öncelikle teşekkürler böyle bir kolaylığı bize sağladığınız için birşey soracağım popup sayfasının ayarlamalarını yaptım fakat’default.asp’ ilk açılışta çıkmasını istiyorum bunu nasıl sağlayabilirim? cevaplarsan minnettar olurum.

  13. merhaba,
    çalışmanız çok güzel fakat kullanamadım. muhtemelen çok basit bir sıkıntıdır ama bilmeyince olmuyor demekki 🙂

    ab-orta tanimlamalari içinde yer alan background image alanını 600×520 bir image ile değiştirdim fakat ince bir bar halinde görünüyor onun yerine aycan.jpg resminin olduğu yere koyduğumda ise tam boyda göremiyorum. kısacası sizin frame e istediğim resmi tam çözünürlükte nasıl oturtabilirim?
    acil yardımınızı bekliyorum.
    şimdiden teşekkürler

    body {margin: 0; padding: 0;}

    #abPopup{display: none; position: absolute; z-index: 9999;}
    /* ================================================ */
    /* ! ab-ust tanimlamalari */
    /* ================================================ */
    #ab-ust{width: 600px; height: 48px; overflow: hidden; margin: 0; padding: 25px 25px 0 25px; background: url(../resim/ust.png) left top no-repeat;}
    a.ab-kapat{width: 13px; height: 15px; overflow: hidden; margin: 4px 0 0 5px ; padding:0; display: inline-block; text-indent: -9999px; background: url(../resim/kapat2.png) left top no-repeat; float: left;}
    a.ab-kapat:hover{ background: url(../resim/kapat.png) left top no-repeat;}
    h2#ab-baslik{width: 550px; font-size: 14px; font-family: ‘Verdana’,serif; font-weight: normal; line-height: 17px; overflow: hidden; margin: 4px 0 0 5px; padding:10px 0 0 0; display: inline-block; text-align: center;}
    /* ================================================ */
    /* ! ab-orta tanimlamalari */
    /* ================================================ */
    #ab-orta{
    width: 590px;
    overflow: hidden;
    margin: 0px 0 0 0;
    padding: 0 30px;
    background: url(../resim/love.png);
    }
    #ab-orta p{width: 570px; overflow: hidden; margin: 0; padding: 10px ;font-family: ‘Verdana’,serif; font-size: 12px; line-height: 16px; color: #333 ; text-align: justify;}
    #ab-orta p a{color: #000; font-weight: bold; text-decoration: none;}
    #ab-orta p a:hover{color: #cd1821; text-decoration: none;}
    #ab-orta p img{width:160px; overflow: hidden; margin: 0; padding: 0 10px 10px 0; float: left; }
    /* ================================================ */
    /* ! ab-alt tanimlamalari */
    /* ================================================ */
    #ab-alt{width: 600px; height: 52px; overflow: hidden; margin: 0; padding: 0 25px; background: url(../resim/alt.png) left top repeat-y;}
    #ab-alt p{width: 600px; height: 42px; margin: 0; padding: 10px 0 0 0 ; font-family: ‘Verdana’,serif;text-align: center; font-size: 11px; line-height: 15px; color: #333;}
    #ab-alt a{display: inline-block; color: #333; text-decoration: none; float: none; }
    #ab-alt a:hover{color: #cd1821;}

    1. @Onur öncelikle kullandığın için teşekkürler,

      O div’e verdiğin resim repeat oluyor ona dikkat et. Eğer sıkıntın devam ediyorsa bir sayfaya at bakarız.

  14. ilgin için teşekkürler Aycan, ‘add property’ den ‘height’ ekleyip değer verim ve çözdüm. ‘repeat’i farkedip kaldırmıştım zaten. tekrar teşekkürler.
    Şimdi tek sıkıntım ‘top’ ve ‘bottom’ image ler arasında kalan resmin,diğerlerine göre solda kalması. onu nereden ayarlayacağımı bulamadım henüz 🙂

  15. Öncelikle emeğine sağlık.
    Bir sorum olacak ben bunun genişlik değerini nasıl arttırabilirim?
    Teşekkürler.

  16. Bende mi sorun var anlayamadım ama olmuyor sadece popup’un yeri değişiyor, tam olarak hangi değeri değiştirmem gerek mesela?

  17. Bir yardım gerekiyor. Akıl verebilir misin acaba? http://www.asfasaglik.com Fiyat al kısmına tıkladığım zaman yanlış veri girdiğimde javascript penceleri çıkıyor doldurmanız gerekiyor diyor ancak popup’dun arka tarafında kalıyor incelersen eger görebilirmisin bunu nasıl halledebilirim ?
    İlginize teşekkür ederim.

  18. çok güzel olmuş fakat şöyle bir sorun var, web tarayıcısını monitor ekranında belli bir düzeyde küçültüp sonra popup u açtığımızda ve sonra web tarayıcısını köşesinden tutum büyüttüğümüzde popup hareket ediyor fakat arka plan kalıyor. nasıl çözülür bu sorun. cevapları takip edeceğim. kolay gelsin.

  19. merhab, bahsettiğim problemi facebook popup undan bakarak hallettim. Kodun içine arkaplan açılmadan önce $(window).scrollTop() ve scrollLeft() yazarak hallettim. popup tetiklendiğinde web penceresi hangi konumda olursa olsun popup değerleri sıfırlayıp açılıyor. yeni abPopup unu bekliyoruz Aycan kolay gelsin

  20. Ustadım açılan popupun içine attığımız resimin özellikle altında aşırı boşluk kalıyor bunu nasıl önleyebiliriz kısaca sorum şu açılan popupun içine attığım resmin bütün kenarlara sıfır olarak yanaşmasını istiyorum,
    Yardımların ve emeğin için şimdiden tşk ederim

  21. Demoyu çalıştırdım, çok güzel ama ben bir türlü bunları kodlarıma uyarlıyamadım.. bu css javascript dosyalarını nasıl çağırıyoruz! dosyaları projemize ekleme kısmını detaylı tekrardan anlatırsan sevinirim 🙂 ‘yapmanız gerekenler’ başlığını yeniden anlatmanızı istiyoruz. Boş bi proje açtım, onda kullanmak istiyorum ?????

  22. Cookie ayarı sadece gün mü oluyor?
    Cookie kullanmak istemiyorum her sayfada çıksın istiyorum yapabilir sen çok sevinirim 🙂
    Bir de gün değilde dakika olsa cookieler süper olur 🙂
    Çok şey istedim ama kusura bakma 🙁

  23. Harika iş çıkartmışsınız. Şu anda kullanıyoruz. Ufak tefek sıkıntılar oldu ama hepsini hallettik, bizden kaynaklıydı tabii.

    Son bir sorun kaldı. Js scroll-pane eklentisini kullandığımızda arka plan kararıyor ama ne yazık ki popup gözükmüyor. Tabii kaydırma çubuğu da gözükmüyor. Ne yapabiliriz ?

  24. İçerisine youtube videosu ekledim fakat padding ayarlarını tam olarak ayarlayamadım. Sol ve üste tam olarak dayasım ama sağ ve alt kısımda biraz boşluk kalıyor nedense

  25. Bi sayfa içerisinde birden fazla popup nasıl kullanabilirim yardımcı olursanız sevinirim.ACİL.!

  26. Öncelikle Başarılı bir çalışma yapmışsınız ellerinize sağlık. Açılan Popup içine link atıp yeni bir popup açmasını yapmaya çalıştım ama maalesef olmadı bu işlemi nasıl gerçekleştirebiliriz.

    İyi Çalışmalar Dilerim

  27. bunu wordpresse nasıl entegre ederim sayfalar ve yazılar bu şekilde açılmasını istiyorum?

  28. Merhabalar,

    Bu güzel çalışma için teşekkür ederim. Ancak yorumlardan takip edebildiğim kadarıyla farklı js çalışmaları yapan arkadaşlar da da oluşan hata bendekiyle aynı. Sorun sizin yapmış olduğunuz js dosyasının sıralamasını değiştirerek giderilemiyor malesef. Kullanmış olduğunuz jquery.lastest.min.js dosyasından kaynaklı bir problem oluşuyor. Yardımcı olabilir misiniz?

  29. AÇlışmada üç link vermişsin üç farklı pouup var ben aynı sayfa içeirisinde bir linki birden fazla kez kullanmak istiyorum nasıl yaabilirim??
    yardımcı olrsan sevinirim

  30. selam,
    hocam otomatik acılısta eklediğinizi belrittiniz ama indiriğimiz index e tıkladıgımızda otomatik değil tıklamalı var.bunun nasıl yapabilirim.anasayfama koycam oto cıkacak

  31. merhaba, paylaşım için teşekkürler. Sitenin alt bölümünde bir div e tıklanınca popup açılıyor ancak açıldığı bölüm sitenin bulunduğu (height) yerde değil de en üstte oluyor. Ben ise footer a yakın bir yerde bulunan div e tıklanınca yine aynı hizada açılmasını istiyorum. Çözümü nedir?

  32. merhaba,örneğin bende index.php sayfası var diyelim,bu popup’u o sayfada kullanmak için nasıl bir yol izliyicem.
    yukarıda yazılanlar bilmeyen biri için pek açık değil

  33. Merhaba elinize sağlık güzel uygulama. Yalnız birde bir checkbox gibi brişey koyup bir daha banner gösterme gibi de birşey ekleyebilir misiniz?

  34. popup un pozisyonunu sağa yada sola uzaklığını belirtemiyor muyuz ?

    örn. #popup1 {margin-left:-100px;} gibi. Böyle bir değer girdiğimde kod işe yaramıyor.

    pozisyonu sadece top olarak belirtebiliyoruz. Sağ yada sol olmuyor sanırım ?

    Yapmak istediğim şu:
    Sitemde 3 tane popup kullanmak istiyorum, biri saol üstte diğeri üst ortada ötekisi ise sağ üstte.

    Cvplarınızı bekliyorum.Teşekkürler.

  35. Teşekkür ederim çalışmanız için ancak chrome tarayıcısında malesef çalışmıyor. açılışı otomatik yapınca otomatik olarak geliyor uyarı ancak kapattıktan sonra sayfaya tekrar girince ya da f5 yapınca uyarı tekrar geliyor. En çok kullanılan tarayıcıya uyumlu olmaması büyük eksi olmuş. Chrome’a göre düzenlemenizde fayda var. Kolay gelsin.

  36. aycan hocam merhaba.. elinize sağlık. güzel bir çalış olmuş.. google chrome taraycılarda galiba çalışmıyor. çünkü chrome ayarlarının altını üstüne getirdim yinede olmadı.. chrome’da çalışması için ne yapabiliriz.

  37. Eline sağlık fakat malesef değişken genişlik ve yüksekliklerde sorun çıkarıyor. Ayrıca biçok kütüphane ile çakışıyor. Ve “ortala” dediğinde malesef komple body nin ortasına alıyor. 2000px yüksekliği olan bir sayfanın taaa ortasına gidiyor. Eline sağlık v3 için umarım sana yardımcı olabilmişimdir.

  38. Merhaba
    Bu Kodlamayı ben Bir WordPress sitesinde Kullandım sitede Düzgün Bir Şekilde Cıkıyor soru Yok Bu Konuda Ama Sadece İndex.php Dosyasında Cıkmasını Diğer Sayfalar İle Bir Bağlantısının Olmamasını Düşünüyorum Bu Konuda Yardımcı Olabilirmisiniz.

Eyüp Gündüz için bir yanıt yazın Yanıtı iptal et

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir