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.