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
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.
Evet kullanımı çok kolay.
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.
<!-- ================================================ -->
<!-- ! abPopup baslangic -->
<!-- ================================================ -->
<div id="popup1">
<div id="abPopup">
<div id="ab-ust">
<a class="ab-kapat" href="#">Kapat</a>
<h2 id="ab-baslik">abPopup uygulaması 2. versiyon ~ aycan.net</h2>
</div>
<!-- ab-ust DIV kapanis -->
<div id="ab-orta">
<img src="kutuphane/resim/aycan.jpg" alt="aycan bülbül" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry <a title="aycan " href="http://www.aycan.net/">aycan.net</a> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<!-- ab-orta DIV kapanis -->
<div id="ab-alt">
Üretken site : <a title="aycan.net" href="http://www.aycan.net/"> aycan.net</a></div>
<!-- ab-alt DIV kapanis --></div>
<!-- abPopup DIV kapanis --></div>
<!-- ================================================ -->
<!-- ! abPopup bitis -->
<!-- ================================================ -->
<script type="text/javascript"><!--mce:0--></script>
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.
<script type="text/javascript"><!--mce:1--></script>
jQuery('#popup1').abPopup
({
### Acilis ###
'acilis' : otomatik veya tiklama. Eger tıklama ise hangi butona tıklayınca açılacağını belirtme yani (tiklama,buton1) Buton1 id'li html tagına tıklanınca.
'pozisyon' : ortala,ortala veya ortal,top,50px
'arkaplan' : opsiyonel
'arkaplanSaydam' : opsiyonel (arkaplanin saydamlik derecesi)
### Kapanis ###
'htmlTag' : opsiyonel (#buton, .buton vs.)
'siyahCerceve' : true veya false (Arka plana tiklayinca kapanma)
'esc' : true veya false (Esc tusuna basinca kapatma)
});
ellerine sağlık kanka mucks.
Merhabalar,
ie 9 ile poup aç dedigimizde genişlemesine scrool barın çıkmasına sebep oluyor onu düzenlerseniz daha güzel olur.
Teşekkürler yeni projemde kullandım.
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
Teşekkürler güzel bir örnek uygulama
demo 1 ve demo 3 te “daha oraya gelmedik” yazıyor güncellemede bir sıkıntı mı oldu acaba ?
Paylaşımlarınız ve katkılarınızdan dolayı tşk ederim. çok işime yaradı kardeş. tekrar tşkler
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ı?
Sanırsam çakışma söz konusu @Metin
Çok teşekkürler.Kodlarla aram yok umarım becerebilirim
Ö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.
Ö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.
Hangi dosyada tutuluyor acaba bu boyutlar css dosyasında height ile ilgili bir bilgi göremedim de.
arkaPlan fonksiyonuna bakarsanız açılan siyah ekranın boyunu ayarlayabilirsiniz.
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?
@Devrim embed’e vmode= transparant demen lazım ?
Hocam iframe kodu yukarıdaki gibi.. Senin dediğin vmode=”transparent” ekledim ama değişen bir şey olmadı…
Kod’u göremiyorum ?
Büyük ihtimal yorum yazarken engellenmiştir. Ben şöyle yazayım en iyisi
Büyük ihtimal yorum yazarken engellenmiştir. Ben şöyle yazayım en iyisi width değeri 640 height değeri 360 src olarak video embed adresi var http://www.youtube.com/embed/LXEKuttVRIo?rel=0 sonra frameborder’a 0 verilmiş en sondada allowfullscreen var. sonrasında da iframe kapatılmış
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 ?
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);
}
});
Güzel olmuş, kullanalım bunu
İnternet expolerda çalışmıyor galiba, denedim
Ç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.
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.
Tamam sağolsun söylediğinizi deniycem.
elinize sağlık gerektiğinde kullanmak üzere arşivime ekledim
Ö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.
Orada acilis tagı var oraya direk otomatik yazarsanız otomatik açılış yapacaktır. http://www.aycan.net/cookieli-popup-uygulamasi/ bu uygulama bir önceki uygulamaya göre daha moderdir.
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;}
@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.
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
Öncelikle emeğine sağlık.
Bir sorum olacak ben bunun genişlik değerini nasıl arttırabilirim?
Teşekkürler.
Ömer Css dosyasındaki değerleri artıracaksın.
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?
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.
#popup3{z-index:2;}
.ab-popup-kararti{z-index:1;}
Css dosyana bu kodları eklersen problem çözülecektir.
ç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.
Merhaba Erkan, demek istediğin şeyin kod dilindeki karşılığı window.resize’dır şu konuda http://www.aycan.net/jquery-ile-dikey-ortalama/ mevcuttur anlatımı ama yakın süre içinde yeni bir popup uygulaması yapacağım ve bu eksiklerin hepsini tek bir uygulamada topayacağım
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
Güzel uygulama teşekkürler
Gerçekten işe yarayacak bir konu olmuş.
Teşekkürler..
Merhaba
Linke tıklandığımızda içerikte yazı çok ise scrolbars olsun bunu nasıl yapabilirim ?
Kelvin luck’un js scrollpane eklentisi ile yapabilirsiniz.
teşekürler işime yaradı aycan.net
