jQuery Popup uygulaması
26. Tem, 2010 
14 Comments
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
<div class="kapsayiciSiyah"></div>
<div class="disKutu">
<div class="icKutu">
<div class="icKutuUst">
<h1>Aycan.net Popup Uygulaması</h1> <img class="kutulariKapat" alt="kapat" src="kapat.gif"/>
</div>
<div class="icKutuOrta">
<h1>1 - [Açılırken]</h1>
<p class="paragraf">
Direk sayfa yüklendiğinde kapsayiciSiyah ekranı tamamen kapsayacak ve ardından 0.9 mili saniye sonra disKutu divimiz fadeIn olacak.
</p>
<h1>2 - [İçerik]</h1>
<p class="paragraf">
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.
</p>
<h1>3 - [Kapatma]</h1>
<p class="paragraf">
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.
</p>
<h1>4- [Boyutlandırma]</h1>
<p class="paragraf">
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.
</p>
<div class="icKutubutonlar">
<div class="icKutuOrtaButon2">
<a href="http://www.aycan.net" >Ana Sayfa</a>
</div>
<div class="icKutuOrtaButon">
<a href="#" >Devamı</a>
</div>
</div>
</div>
</div>
</div>
Css kodlarını kendi sayfasınıza entegre ediniz .
.kapsayiciSiyah{width:100%; height: 100%; background: #333; position: absolute; z-index: 98; display: block;}
.disKutu{width: 500px; overflow: hidden; border:10px solid #b3b3b3; position: absolute; z-index: 99; left:50%; margin-left: -270px; display: none;}
.icKutu{display: block; background: #fff; border:1px solid #3B5998; }
.icKutuUst{width: 498px; height: 31px; background-color:#6D84B4;}
.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;}
.icKutuUst img{border:0;float:right;margin: 8px 10px 0px 0px;}
.icKutuOrta{width: 498px; overflow: hidden; background-color:#fff;}
.icKutuOrta h1{width: 450px; overflow: hidden; margin:10px 25px 5px 25px; line-height: 18px; color:#cd1821;font-size:14px;font-family:'Calibri',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;}
.icKutubutonlar{width: 498px; border-top:1px solid #ccc; background: #f2f2f2;}
.icKutuOrtaButon{margin: 8px 10px 8px 0px; overflow: hidden;border:1px solid #29447E; float: right;}
.icKutuOrtaButon a{background: #5C74A9; border-top:1px solid #A5B1CA; text-decoration: none; padding: 5px 8px 4px 8px;display: block; color:#fff; font-size: 16px; font-weight: bold;font-family:'Calibri',Arial,SansSerif;}
.icKutuOrtaButon2{margin: 8px 10px 8px 0px; overflow: hidden;border:1px solid #999999; float: right;}
.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;}
Eğer ayrı bir css dosyanız yoksa bu kodları tagları arasına
<style type="text/css"> . . </style>
style tagı açın ve içerisine kodları yapıştırın.
Jquery kodlarını head tagları arasına yapıştırınız.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="aycanb-popup.js"></script>
ve uygulamamız tamamen hazır bir hale geldi boş bir vaktimde çeşitli popup uygulamaları bu başlık altında belirteceğim.
Valla gayet güzel olmuş, bende seni takip edip geliştiririm bu zımbırtıyı biraz
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.
Çok güzel olmuş Aycan.Basit poplardan kullanışlı ve rahatsız edici gözükmüyor.
Eline sağlık Aycan.
ü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.
Tabiki bunu yapabilirsin ancak php bilgin olması gerekir session başlamadıysa popup’u göster diyeceksin.
Aycan bu çok güzeL oLmuş:) TeşekkürLer.
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.
@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.
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?
@Murat bunun için cookie kullanmalısın php ile bunu yapabilirsin.
Teşekkürler Aycan. Bir sitede kullanmaya başladım.
süper yaw facebook tarzı script yapıyordum güzel oldu tamda