jQuery Popup uygulaması

Merhaba arkadaşlar bu yazmış olduğum popup uygulamasının daha profesiyoneli vardır. Bu uygulmada css sorunları ve jQuery sorunları olabilir.

jQuery popup eklentisi v2’ye buraya tıklayarak ulaşabilirsiniz.

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

Artık sitelerimizide tarayıcı güncelleme uyarısı , duyuru gibi önemli uyarıları göstermek tasarım pek hoş olmasada bir uyarı sistemi hazırladım.

Uyarı özellikleri ;
1 – [Açılırken] Direk sayfa yüklendiğinde kapsayiciSiyah ekranı tamamen kapsayacak ve ardından 0.9 mili saniye sonra disKutu divimiz fadeIn olacak.
2 – [İçerik] disKutu divimizin en üstünde “Aycan.Net Uyarı” diye site adını belirteceğimiz bir uyarı mesajı ve sağ tarafda ise popupu kapatmak için bir resim vardır. Alt kısımda ise konu başlığını belirtmek için h1 başlık kısmı ve yazı için p tagı kullandım. En alt kısımda ise kullanıcılar için çoklu kullanım için yaptığım 2 adet buton var bunlar direk input elementi değil direk a taglarıdır isteğe göre eklenilebilir çıkartılabilir.
3 – [Kapatma] Popup uyarlamamızın en çok seçimli kısmı kapatma kısmıdır 3 farklı şekilde kapatma olayını entegre ettim.

3.a – Sağ üstteki kapat iconuna tıklayınca,
3.b – popup çerçevesinin dışındaki siyah ekrana tıklayınca,
3.c – esc tuşuna basınca.
4- [Boyutlandırma] Popup kutusunun yüksekliği içerik arttıkça sorunsuz bir şekilde yükselebilir o yüzden popup uygulamasını sitenin tam ortasında açılması için otomatik boyutlandırıcı yazdım ve disKutu’nın boyuna göre margin-top değeri değişmektedir.

Uyarlamayı çalıştırmak için ;

Aşağıdaki html kodlarını <body></body> tagları arasında herhangi bir yere yapıştırmak

 

 

Css kodlarını kendi sayfasınıza entegre ediniz .

 

Eğer ayrı bir css dosyanız yoksa bu kodları tagları arasına

style tagı açın ve içerisine kodları yapıştırın.

Jquery kodlarını head tagları arasına yapıştırınız.

 

ve uygulamamız tamamen hazır bir hale geldi boş bir vaktimde çeşitli popup uygulamaları bu başlık altında belirteceğim.

Uygulama demosu , Uygulama indir.

“jQuery Popup uygulaması” üzerine 68 yorum

  1. Aycan ;

    sitendeki çalışmaları takip ediyorum. ve JQuery konusundaki çalışmalarına grafik kasarak yaptıgım çalışmalarda kullanıyorum. diger blog yazarları gibi link demo şeklinde yayın yapmayıp konuyu anlatmak demoyu kendin hazırlaman gayet hoş. blog’unu sürekli takip ediyorum iyi çalışmalar dilerim.

    HTT.

  2. üstad. çok hoş olmuş. eline sağlık. fakat bunu sayfa her açıldığında göstermek yerine misal üye girişi yapılan bir sitede kullanıcı adı veya şifre yanlış yazıldığında uyarı verirken gösterebilrmiyiz. tşkler.

  3. evet php ile hata kodunu popup ile gösterdim.çok güzel oldu tam istediğim gibi oldu. fakat sayfanın ortasında görünmesini istemiyorum. sayfanın tam ortasında ve en üstte nasıl gösterebilrim. ayar sayfasından biraz baktım ama çözemedim.

  4. @buddy

    aycanb-popup.js dosyasının en altındaki

    //yukseklikleri eşitleme
    var yukseklik = $(‘.disKutu’).height();
    var ekranYukseklik = screen.height;
    var yukseklikYari = yukseklik/2;
    if(ekranYukseklik > yukseklik){
    var yukseklikAyarla = (ekranYukseklik – yukseklik)/3;
    $(‘.disKutu’).css({
    ‘margin-top’: yukseklikAyarla
    });
    }else{
    $(‘.disKutu’).css({
    ‘margin-top’: ’20px’,
    ‘margin-bottom’: ’20px’
    });
    }

    bu kodları sil direk sayfanın en üstüne çıkar.

  5. Emeğiniz ve paylaşımınız için teşekkürler. Birşey sormak istiyorum. Ana Sayfada bu popup’ı kullandık diyelim. Sayfadaki linkleri kullanarak başka bir sayfaya gittikten sonra geri geldiğimizde popup’ın tekrar açılmamasını nasıl sağlayabiliriz?

  6. Çok başarılı bir işlem olmuş fakat şöyle bir sorun çıktı bende.

    mesela kodu sidebar alanına ekliyorum kod sadece o alanınn sınırlarında etkili oluyor yani bütün sayfayı kaplamıyor.

    illaki header dosyasında tagından sonra eklemem gerekiyor.

    ama benim bunu yapacak durumum yok yani kodu bütün sayfalarda değilde alt sayfalarda göstermek istiyorum ama bütün sayfada çıksın sınırlanmasın istiyorum yapma şanımız var mı acaba ?

    örnek site : http://www.imagebam.com/image/7c9c7a96507466

  7. bunu siyah bir sayfaya ekledıgımızde problem oluyor pop-up kapanmış olsada sayfa zemini bozuyor sayfanın bı kısmı beyaz kalıyor

  8. @onur Evet css kısmında siyah problem oluyor tam tarayıcının boyutunu aldırmıyorum o yüzden. popup uygulamasının V2 versiyonunu yapacağım bu hatalardan arınmış bir şekilde istekleriniz nelerdir ?
    1 – Tıklayınca açılma/kapanma
    2 – Zamana göre açılma/kapanma
    3 – Kapatma seçenekleri

  9. merhabalar, çalışma gerçekten güzel olmuş emeğinize sağlık. Kendi web sitelerimden birinde uygulama yaptım ancak bir kaç sorunum oluştu.
    1- sitem flash/html tabanlı olduğu için flashlar jquery scriptin üstüne çıkıyor. bunu nasıl engelleyebilirim.
    2- scriptte kullandığım fontlar sayfadaki fontları etkiledi. font px leri büyüdü.

    Bu durumlar hakkında buradan ve mail yolu ile bilgi verirseniz memnun olurum.
    Şimdiden teşekkürler

  10. 1 Flash dosyanızın kodlarına wmode=”transparanet yazacaksınız”

    http://www.google.com.tr/search?hl=&q=wmode%3D%22transparent%22&sourceid=navclient-ff&rlz=1B3GGLL_tr___TR387&ie=UTF-8

    2 Verdiğim css’de ki font değerlerini kendinize göre düzenleyeceksiniz aşağıdaki kodları
    .icKutuUst h1{width: 385px; height: 20px; padding: 8px 0px 3px 15px;color:#fff; float:left; font-size: 18px; font-weight: bold; font-family:’Trebuchet MS’,Arial,SansSerif;}
    p.paragraf{width: 450px; overflow: hidden; margin:5px 25px 10px 25px; line-height: 15px;font-size:14px;font-family:’Calibri’,Arial,SansSerif; text-align: justify;}
    .icKutuOrtaButon2 a{background: #E4E4E4; border-top:1px solid #FFFFFF; text-decoration: none; padding: 5px 8px 4px 8px;display: block; color:#333; font-size: 16px; font-weight: bold;font-family:’Calibri’,Arial,SansSerif;}

  11. İlgine teşekkür ederim. Sorunu hallettim ve kullanmaya başladım. Çalışmanın flashın altına düşmesini sorununuda
    .disKutu{width: 520px; overflow: hidden; border:10px solid #b3b3b3; position: absolute; top:270px; z-index: 99; left:65%; margin-left: -270px; display: none;} satırındaki top:270px ile hallettim istediğim ayarda oldu..
    çalışmalarında başarıların devamını dilerim.

  12. Emeğine sağlık.Benim bir sorum olacak acaba otomatik olarak kapatmak için ne yapmalıyım.Yani 10 sn sonra mesela.

  13. Boylesine güzel bir şeyi bizimle paylaşmanız çok güzel..
    BU popup’u günde sadece 1 kere nasıl gösterebiliriz?Malum sayfalar arası geçişte beklemelere, sinirlenmelre sebep oluyor.

  14. Merhaba Aycan,

    Uygulamayı bende siteme ekledim fakat.Siyah arkaplan bütün sayfayı kaplamıyor.(yarısını kaplıyor)
    Bunu nasıl düzeltebiliriz?

    Teşekkürler..

  15. html kısmındaki;
    kapsayiciSiyah{width:100%; height: 367%

    ayarları kendime siteme göre düzenledim.ve sorunsuz çalışıyor.

    Teşekkürler Aycan severek takip ediyorum..

  16. aycan kapsayıcı siyah elementinin posizyon değeri fixed olması lazım. yoksa çok uzunluğu olan sayfalarda yükseklik değeri 100% olmasına rağmen sayfanın yüzde yüzünü kaplamıyor. belirli kısım açıkta kalıyor. dediğim demo sayfasında belli olmaz. içeriği olan bir sitede denemelisin meseja sitenin ana sayfasında deneyebilirsin.

  17. merhabalar,
    biraz geçde olsa bu güzel çalışmaya ulaştım. deneme amaçlı siteme yerleştirmek istedim ancak;

    site açılırken siyah kaplayıcı alan tüm sayfayı kapsıyor herhangi bir problem yok ama diskutu, ic kutu gibi kısımlar hafif transparan oldu. arkasından alttaki site yazıları çıkıyor. biryerlerde yanlış mı yapıyorum acaba. yardım ederseniz sevinirim. iyi çalışmalar.

  18. Merhaba Aycan;
    Gerçekten çalışman çok güzel benim merak ettiğim bir şey var. Bu ekranın sitenin içinde bir butona bağlasak. Arkadaki Sayfa görüntüsü kapanmadan bu senin yaptığın popup açılsa ve yanlar yarı saydam olsa, böyle bir şey mümkünmü?

  19. uygulama güzel ancak siteyi arka planda nasıl gösterebilirim.yani sizin sayfanıza girişite olduğu gibi site arka planda kalacak bunu nasıl yapabilirim.

  20. Mert’in demek istedigi sanirim karsilama eklentisiyle ilgili.Site acilisinda ilk once resim geliyor arka planda transparet site gorunuyor.Son zamanlarda populer olan alisveris sitelerinde cok goruyorum bu uygulamayi.

  21. ya aslında istediğim şey sende de var ben bu sayfaya girdiğimde sayfa açılırken senin koymuş olduğun bayraklar beni karşılıyor site de arka planda kalıyor bunu yapmanın yolunu arıyorum 🙂

  22. Merhabalar, Uygulama çok güzel. ben sitem için kullanmak istedim. div lerden birine Facebbok sayfası beğen kodları bulup içersine yerleştirdim. Çok güzel oldu Teşekkürler. Sitede bu uygulama benzeri birde cokie li olanı var. Ben bu uygulamanın diğer uygulama gibi sadece bir kere yada belirli aralıklarda gösterilmesini hersayfada gösterilmeemesini istiyorum. Oradaki cokie mantıgını bu uygulamaya nasıl entegre ederbilirim. Belki cevabını vermişsinizdir ama tümünü okudum gözden kaçırmış olabilirim.. İyi çalışmalar…

  23. Merhaba… Cevap için teşekkür ederim. Tavsiye edeceğiniz bi uygulama varmı. Mesela Diğer uygulamadaki
    – Cookie Temizle
    – Popup aç
    ekranı gelmesinde direk popup çıksın ekrana ve bir kere. bunu nasıl yapabilirim… Teşekkürler iyi çalışmalar…

  24. web siteye sizin verdiğiniz uygulamayı yaptığımdan flas swf olanlar üste cıkıp görüntüyü bozmasına sebeb oluyor.bunu nasıl düzelte bileceğim konusunda bilgi verirseniz sevinirim.

  25. merhaba demek istedigim sayfamda popup acıp içinre resimlei göstermek bunu yapıyorum ama sayfam aşşayadogru uzadıgı için popup acıldıgında hep ortada olmasını istiyorum yanı scrolbar cubugunu aşagı yukarı yapılınca popup hep ortada kalsın iştiyorum bunu merak ediyordum.teşekkürler

    1. Merhaba Serkan css’den .disKutu{width: 500px; overflow: hidden; border:10px solid #b3b3b3; position: absolute; z-index: 99; left:50%; margin-left: -270px; display: none;} buradaki position değerini fixed yaparsan sorun ortadan kalkacaktır.

  26. Aycan Bey, Sitemi master Page kullanarak yaptım. Yaptığınız Pop Up ‘ı Default sayfamda kullanmak istiyorum fakat kapsayicisiyah Master Page ile yaptığım kısımları kapsamıyor. Bunu nasıl çözebilirim (Cookie kullanmadan )

  27. hocam bu popup u textarea olarak yapmamız mümkün mü ? yazı editörüm telefon desteklemiyor küçük bi textarea yapıp bunu kullanmam mümkün mü ?

  28. wickedshaiya.com sitesindeki gibi aynı şekilde nasıl yaparız, tasarım pek önemli değil linkteki gibi olsa yeterli olur ilgi ve alakan için şimdiden teşekkürler..

  29. Kod için teşekkürler. güzel çalışma olmuş. belli bir süre geçtikten sonra otomatik kapatma koyabilirmiyiz buna?

    1. Çok eski bir versiyon, yenisini yazdığımda onda bu özellik olacak.
      Ama kısa çözüm ise setTimeout(function(){ $(‘a.kapat’).trigger(‘click’)},3000)

Hakan için bir yanıt yazın Yanıtı iptal et

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