Artık sitelerimizide tarayıcı guncelleme uyarısı , duyuru gibi onemli uyarıları gostermek tasarım pek hoş olmasada bir uyarı sistemi hazırladım.

Uyarı ozellikleri ;
1 – [Acılırken] Direk sayfa yuklendiğinde kapsayiciSiyah ekranı tamamen kapsayacak ve ardından 0.9 mili saniye sonra disKutu divimiz fadeIn olacak.
2 – [İcerik] disKutu divimizin en ustunde “Aycan.Net Uyarı” diye site adını belirteceğimiz bir uyarı mesajı ve sağ tarafda ise popupu kapatmak icin bir resim vardır. Alt kısımda ise konu başlığını belirtmek icin h1 başlık kısmı ve yazı icin p tagı kullandım. En alt kısımda ise kullanıcılar icin coklu kullanım icin yaptığım 2 adet buton var bunlar direk input elementi değil direk a taglarıdır isteğe gore eklenilebilir cıkartılabilir.
3 – [Kapatma] Popup uyarlamamızın en cok secimli kısmı kapatma kısmıdır 3 farklı şekilde kapatma olayını entegre ettim.

3.a – Sağ ustteki kapat iconuna tıklayınca,
3.b – popup cercevesinin dışındaki siyah ekrana tıklayınca,
3.c – esc tuşuna basınca.
4- [Boyutlandırma] Popup kutusunun yuksekliği icerik arttıkca sorunsuz bir şekilde yukselebilir o yuzden popup uygulamasını sitenin tam ortasında acılması icin otomatik boyutlandırıcı yazdım ve disKutu ’nın boyuna gore margin-top değeri değişmektedir.




Uyarlamayı calıştırmak icin ;

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

Kod:

[h=1]Aycan.net Popup Uygulaması[/h]
[h=1]1 - [Acılırken][/h] Direk sayfa yuklendiğinde kapsayiciSiyah ekranı tamamen kapsayacak ve ardından 0.9 mili saniye sonra disKutu divimiz fadeIn olacak.
[h=1]2 - [İcerik][/h] disKutu divimizin en ustunde "Aycan.Net Uyarı" diye site adını belirteceğimiz bir uyarı mesajı ve sağ tarafda ise popupu kapatmak icin bir resim vardır. Alt kısımda ise konu başlığını belirtmek icin h1 başlık kısmı ve yazı icin p tagı kullandım. En alt kısımda ise kullanıcılar icin coklu kullanım icin yaptığım 2 adet buton var bunlar direk input elementi değil direk a taglarıdır isteğe gore eklenilebilir cıkartılabilir.
[h=1]3 - [Kapatma][/h] Popup uyarlamamızın en cok secimli kısmı kapatma kısmıdır 3 farklı şekilde kapatma olayını entegre ettim. 3.a - Sağ ustteki kapat iconuna tıklayınca, 3.b - popup cercevesinin dışındaki siyah ekrana tıklayınca, 3.c - esc tuşuna basınca.
[h=1]4- [Boyutlandırma][/h] Popup kutusunun yuksekliği icerik arttıkca sorunsuz bir şekilde yukselebilir o yuzden popup uygulamasını sitenin tam ortasında acılması icin otomatik boyutlandırıcı yazdım ve disKutu'nın boyuna gore margin-top değeri değişmektedir.
Ana Sayfa
Devamı






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

Kod:
.kapsayiciSiyah .disKutu .icKutu .icKutuUst .icKutuUst h1 .icKutuUst img .icKutuOrta .icKutuOrta h1 p.paragraf .icKutubutonlar .icKutuOrtaButon .icKutuOrtaButon a .icKutuOrtaButon2 .icKutuOrtaButon2 a

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


style tagı acın ve icerisine kodları yapıştırın.

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


Kod:


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

Uygulama demosu , Uygulama indir.


Kaynak gostermenden yayımlamak yasaktır.