Siteyle birlikte açılan jQuery Popup

Bu kod kadir a ‘nın Friendfeed üzerindeki jQuery popup ile ilgili bir bilgi soran şu yazdığı yardım isteğine (silinmiş bu feed) rastlamamla  ortaya çıkmış oldu. İyi de oldu. Bugün ofiste toplanması gereken iki adet masaüstü bilgisayar vardı. Onları bitirdiğimde biraz ar-ge çalışması :) yaptım. Daha önceden elimde bulunan bir popup scriptini document.ready fonksiyonuyla birleştirme firkriyle bir adım da atmış oldum. Orasıyla burasıyla oynayınca istediğim gibi de ortaya çıktı. Şimdi bunu nasıl yapabileceğinizi anlatmaktan memnuniyet duyacağım. Başlayalım…

Öncelikle açılışta siteyle beraber yüklenen javascript popuplar uzun zamandır bizimle birlikte ama kimi farklı pencerede kimi de rahatsız edici derecede kötü oluyor. jQuery nin hayatımıza girmesiyle birlikte bu işleri yapmak ve insanları rahatsız etmeden site içinde kullanmak daha basit bir hal aldı. İşte aşağıda anlattığım şekilde bunu başarabilrsiniz.

Öncelikle HMTL sayfamızı oluşturalım. Burada yukarıdaki yazıda belirtmiş olduğum document.ready komutu ile çağırma işlemini yapıyoruz. O satırları ayrı bir şekilde işaretledim. Aşağıda javascript dosyasındaki ile karıştırmayın. Burada sitenize eklemeniz gereken alanlar popupContact ve backgroundPopup adlı div alanları. Bunları da işaretledim. Bu kodlar ile açılacaktır Popup. Yapmanız gereken şey işaretli alanlardaki divleri olduğu gibi sitenizde açmak istediğiniz yere eklemek. Tabii css ve javascript dosyalarını da entegre etmeyi unutmadan :D

jQuery popup kodu

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Siteyle birlikte açılan jQuery Popup!</title>
	<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="popup.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
centerPopup();
loadPopup();
});
</script>
</head>
<body>
	<center>
		Açılıyoooor :)
	</center>
	<div id="popupContact">
		<a id="popupContactClose">x</a>
		<h1>Siteyle birlikte açılan jQuery Popup!</h1>
		<p id="contactArea">
			Bu ufak kodlar ve jQuery sayesinde harikalar yaratabiliriz.
			<br /><br />
			Açılışta popup gelmesi için biraz kafa yordum :D ama değdi.
			<br /><br />
			ESC ye popup dışına yada x e basarak kapanabilir.
			<br /><br />
		</p>
	</div>
	<div id="backgroundPopup"></div>
</body>
</html>

Sonra da siteye eklediğimiz popup.js özelliklerine göz atalım. Unutmayın ki javascript dosyasını ben yazmadım. Sadece ona uygun olarak bazı değişiklikler yaptım.

jQuery popup javascript dosyası

Popup sisteminin aktifliğini belirleyelim.

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

Yükleme ve devredışı bırakma komutları

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

Ortalayalım…

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6

	$("#backgroundPopup").css({
		"height": windowHeight
	});

}

E tabii yükleme safhasında olacakları belirleyelim. Buradaki document.ready bir butona tıklama durumunda kullanılabilecek düzeyde hazırlanmıştı. Benim kullandığım fonksiyon HTML dosyasında. Yazdım yukarıda.

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

	//LOADING POPUP
	//Click the button event!
	$("#button").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});

	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

Sonrasında CSS dosyasını irdeleyelim. Burada kodlarla ilgili body için de düzenleme yapmıştım. Siz ihtiyacınıza göre cssleri sitenize ekleyebilirsiniz.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}

Bir günlük Çerez bırakarak açmak

Aşağıdaki bir ve birden çok yoruma istinaden çok sorulan bir soruyu da yanıtlayayım böylelikle. Popup u çerez kullanarak günde bir kere açmak için aşağıdaki scripti /head alanından önce ekleyin. Bu kodu eklediğinizde lütfen ilk kodda paylaştığım document.ready içeren scripti tamamiyle kaldırın. Çerez kodunun çalışmama ihtimali var kaldırmazsanız. Buna ek olarak ilk verdiğim cookie kodu çalışmamıştı. Bundan dolayı özür dilerim. Ancak çalışan bir tane yazmayı başardım. Kodda çok bir değişiklik göremeyebilirsiniz ancak ek olarak body alanına bir adet onload kodu eklemeniz gerekmekte. Bunu da kodun altına ekledim.

Not: Ekteki dosyada bu verdiğim kodu bulamazsınız. Onun için buradan kopyalayıp yapıştırın lütfen.

<script type="text/javascript">
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^s+|s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var a=getCookie("popupbirkereacil");
if (a!=null && a!="")
  {

  }
else 
  {
	centerPopup();
    loadPopup();
    setCookie("popupbirkereacil",a,1);
  }
} 
</script>

body alanına onload olarak eklediğinzde şu şekilde görünmesi gerekir.

<body onload="checkCookie()">

Örneğe bakalım :) tıklayın bu yazıya.

Bir kere açılan örneğe bakalım :).

Örneklerde de nasıl çalıştığını görebilrisiniz. Eğer kafanıza yatmayan bir kısım varsa yorum bırakabilirsiniz. En kısa sürede size cevap veririm.Örnekteki Dosyaları indirmek için aşağıdaki indirme linkine tıklayın.

Hadi Selametle…

Dosyayı Ek Alanından İndiriniz

 

65 thoughts on “Siteyle birlikte açılan jQuery Popup”

  1. Hocam peki bu POPUP penceresini 1 kez görünecek şekilde nasıl tasarlayabiliri. Şöyle ki;

    X kullanıcı benim sayfamı açtı, bu POPUP ı okudu ve kapattı, bir daha benim sayfama girince bu POPUP ı görmesin. Yani bir kere okusun ve TAMAM ı tıklayınca bir daha girişinde görmesin.

    1. Hakan,

      Öncelikle teşekkür ederim yorumun için. Onu sanırım Kullanıcılarına sayfana girdiğininde bir tarayıcı çerezi (cookie) bırakırsan ve bunu zamanlama olarak düzenlersen cookie okunup sadece bir kere görünmesi sağlanabilir. Bu konuda ben bi değişiklik yapmadım ama bu mantıkla sen arama yapabilirsin. bunun uygulama sıkıntısı olmaz sanırım.

    1. Selam Berkin,

      Sanırım popup u çağırırken gerekli bir alanı atlıyorsun. Aşağıya eklediğim alanı kodlarını yazarken eklemezsen otomatik olarak pop up gelmez.
      <code>
      < script>
      $(document).ready(function(){
      centerPopup();
      loadPopup();
      });
      </ script>
      </code>

  2. Merhablar bu oluşan popup otomatik geldiği gibi otomatik nasıl kapatabiliris yani 5 sn kapatmasını nasıl saglaya biliriz.

  3. Selam Alaattin çözüm aşağıda :)

    <code>

    $(document).ready(function(){

    centerPopup();

    loadPopup();

    });

    </code>

    Bu kodun bulunduğu yeri aşağıdaki gibi değiştirirsen 5 saniyede kapanan bir popup a sahip olacaksın. :))

    <code>

    $(document).ready(function(){

    centerPopup();

    loadPopup();

    setTimeout(function(){$("#backgroundPopup").fadeOut("slow");$("#popupContact").fadeOut("slow");popupStatus = 0; }, 5000);

    });

    </code>

    1. ben default sayfamda gridviewe verilerimi getirdim ve kendim linkbuton oluşturdum bir istenilen üzerine yalnız dediğim gibi kendim oluşturdum.Şimdi bu linkbutona basınca popup açılması isteniliyor ama yapamıyorum yardımcı olur musunuz.Teşekkürler.

      1. Özge hanım,

        Sitenin header alaında çağırmanız gereken document.ready fonksiyonunu kaldırıp aşağıdaki buton tarzında <code>#button</code> idli bir eleman eklerseniz sıkıntı kalmaz. tıklanabilir özellikli buton aşağıdadır

        <code>div id="button" input type="submit" value="Tıkla Açılsın /div </code>

        Gerekli yerlere <code>< </code> ve </code><code>></code> eklemeyi unutmayın.

        1. yukarda sizin yaptığınız örnekle anlatsanız zahmet olmazsa yani sizin örneğinizle farklılığı gösterseniz burası böyle sizin yapmanız gereken böyle gibi… Teşekkür ederim şimdiden.

          1. Özge Hanım,

            Zaten örneğe göre anlattım :D Yapmanız gereken örnekte <code>popup.js</code> javascript dosyasını çağırdığım alandan sonra <code>script</code> ile başlayan ve <code>/script</code> alanı ile biten alanı silmek. Yani o kodu da silmek.

            Sonra ise popup dosyasını çağırmak istediğiniz linke <code>#button</code> idsini atamak yani linkiniz <code>a id="button"</code> gibi yapmak. Bütün yapmanız gereken bu. Eğer gene olmazsa lütfen info@kaisercrazy.com a düzenledğiniz dosyayı atın ve dosyayı ben düzenleyip size içeriğinde anlatım olarak yazayım

        2. aynı anda yazdık sanırım ben yaptım diye yazdım ama gitmedi size. yaptım şöyle bir hata var basıyorum açılıyor fakat hemen kayboluyor bu neden kaynaklanır.

    1. Alaattin,

      <pre>
      <code>
      <script>
      $ (document).ready(function(){
      centerPopup();
      loadPopup();
      });
      </script>
      </code>
      </pre>
      alanını kaldırıp <code>a href="#" id="button" rel="nofollow">tıkla /a></code> eklerseniz istediğiniz gibi olacaktır. (boşlukları ben ekledim ve parantezleri kaldırdım . kodlar görünmeyecekti yoksa)

  4. Siteyle birlikte açılmasın da linke veya bi resme tıklayınca o pop up çıksın. bunu nasıl yaparız kardeş?

  5. Tam aradığım örnek, zip dosyası bozuk görünüyor, yeniden paylaşırsanız sevinirim. Elinize sağlık, hakkaten aramayla zor bulunan, Türkçe içeriğin az olduğu bir noktada uygulama yapmışsınız.

    1. Tunahan benim baktığım kadarıyla dosyada bir sıkıntı yok, ama tekrar indirdim dosyayı şimdi. Yeniden düzenleme yapıp göndereyim sunucuya. Sana da e-posta yoluyla iletiyorum. İlgine ve yorumuna teşekkür ederim.

  6. Peki bu jquery kodlarını flash içine gömebilir miyiz? swf açıldığında otomatik popup açılıcak şekilde?

  7. Merhaba Çok teşekkürler Bu Tasarmınız için Vbulletinde bir tek bu çalıştı sorunsuz Forumu Sola yasladı ama ama css den hallettim Yalnız benim sormak itediğim cokie ekleyebilirmiyiz buna her kişiye 1 kez görünsün yada günde bir kez gibi   teşekkürler

    1. Slientscream yukarıdaki css içinde body gibi tanımalar da olacaktı. Ondan sola yaslamış olabilir. Ayrıca bir çerez kullanarak bunu halledebilirsin. javascript ile. yukarıda document ready alanını değiştirmen yeterli.  Yazıya kodu ekliyorum.

  8. Teşekkür ederim.  Denemeye vaktim olmamıştı cookie kodunu tam anlamıyla. Kadı kızı durumu olması doğaldır sanırım :)) En sondaki kodu kaldırırsan çalışacaktır büyük ihtimalle. Paylaştığım koddan kaldırıyorum o kısmı. (Tabii dreamweaver cookie destekliyor mu onu da bilmyorum. Notepad++ forever)

  9. Teşekkürler. Uygulaması gayet kolay ve işe yarıyor. Eline sağlık. Lakin IE hatası beni çok uğraştırdı. Sen git popup içine eklediğim iframe'e bağlı saydadaki hata yüzünden popup'ı çalıştırma. Yok kardeşim olmaz öyle şey dediğini duyar gibiyim. Lakin oluyormuş :)

     Bu arada cookie için expires'ı nereden belirtebiliriz onu göremedim. 1 month, 1 week vs gibi. Şu an ne kadar süre gösteriyor falan açıkcası anlamadım. Ya da artık gerçekten kafam basmaz bir haldeyim :) Neyse.. Tekrar çok teşekkür ederim. Saygılar.

  10. Merhaba öncelikle paylaşım için teşekkür ederim. Ekledim ancak şoyle bir sorun oluştu sanırım diğer kodlar ile çakıştı ve popup arka planda kaldı bunu nasıl çözebiliriz

  11. Elinize sağlık.

    Bir sorum olacak size popup herşeyden üste olabilme durumu var mı? Slider döndüğünde karartmanın üstüne çıkıyor.

    Teşekkürler.

    1. Teşekkürler

      Tabii ki, #backgroundPopup içindeki z-index değerini sitenin en üstünde çıkartmak istiyorsan orada yazan 1 değerini 9999 a kadar çıkartabilirsin. Hala içerik arkada kalıyorsa şayet aynı işlemi #popupContact (z-index burada atanmamıştır) içerisine de ekleyebilirsin.

    1. Halil Tekrar Dener misin? Dosyayı yeniden yükledim. Açıldığında üst bilgisi bozuk diyebilir, o sadece uyarıdır. Diğer dosyaları çıkartmana izin veriyor.

  12. Birçok saçma sapan popup'tan sonra bu çok iyi geldi :) Teşekkürler. Çok şık bir popup. Ve çalışan bir kod :)

        1. checkCookie fonksiyonu olan body onload alanını WordPress'in is_page fonksiyonuyla birleştirmelisiniz. Yani <code>if(is_page('id veya kısa isim')) {echo } else {} </code> gibi

  13. Kodlama çok hoş gerçekten ama şöyle bi isteğim olacak; popup'un açıldığı yer anasayfa üzeri olmasını istiyorum. Yani arkaplanda anasayfa olsun. Kapattığımda anasayfa çıksın karşıma istiyorum. Mümkün mü?

    1. Ercan bey,

      #backgroundPopup alanında bulunan z-index değeri anasyfanızın body değerinden büyük olmalıdır. şu an ki durun z-index:1; olması lazım. bunu z-index:99; gibi bir değerle değiştirirseniz bu sorunu çözmüş olursunuz.

  14. Merhaba, gerçekten çok basit ve kullanışlı bir eklenti olmuş. Fakat otomatik kapanma süresini nasıl uzatabilirim.

    1. Ümit bey merhaba,

      Popup üzerinde otomatik olarak kendini kapatma süresi bulunmamakta. Ancak normal şartlarda 1 günlük çerez bırakarak 24 saat boyunca kapalı kalabiliyor. Onu uzatmak isterseniz setCookie fonksiyonunda bulunan "1" değerini yükseltmeniz yeterli olacaktır.

      1. Neredeyse tüm tarayıcılarda denedim fakat otomatik olarak 5 sn kadar sonra kapanıyor Serkan bey

        1. Örnekteki alanda bi değişiklik yapmışım :) Bir ara indirme sorunu olmuştu. Yeni dosyalar oradan son değişiklği de içermekte. Doğrudur. İndirdiğiniz örnekte $(document).ready fonksiyonunda bir setTimeout alanı var. Onun sonunda bulunan 5000 ibaresi 5 saniyeye denk gelir.

          Onu değiştirir ve yükseltirseniz sorununuz düzelir. 5000 milisaniye olarak belirtilmiştir.

          1. Teşekkürler. Cookie için verdiğiniz script hata verdi.
            (29. satır)
            if (a!=null && a!="")

          2. Serkan bey, son olarak cookie de hata var sanırım. if (a!=null && a!="") satırında syntax hatası veriyor. İlginiz için teşekkürler.

  15. Merhaba; #popupContact olan divimizin dışında kalan yerlere tıklamayı nasıl engelelme yapabiliriz. Buun İçin Yapmam gereken Editleme nasıl Olmalı

  16. hocam konu içerisindeki kodunuzu örnek olarak veridğiniz birkere açılan script kodu ile güncellermisiniz. ordaki kod çalışıyor konu içersindeki çalışmıyorda.

    1. franestion, cookie kodunu ayrı olarak verdim. Yazının en sonunda bulabilirsin o kodu. Buradaki amaç ilk etapta bir kere açılan popup değil. Siteyle birlikte açılmasını sağlamaktı.

  17. Merhaba Bilal,

    Eğer herşeyi doğru olarak uyguladıysan örnektekinden pek de farklı olmuyor sistem. ESC tuşuna basıldığında, popup'un arkasında bulunan alana tıklandığında ve popup üzerindeki çarpı işaretine tıklandığında kapanması için ayarlı zaten. orada herhangi birşeyi atlamış olma ihtimalin var mı? Bir kontrol edebilir misin?

  18. lütfen yardım edin dosyayı indirdim ama popup un 1 kere acılması için neyi indiricem veya yazıda ne yapcam anlayamadım bi, turlu

  19. Merhaba, öncelikle çalışmanızdan dolayı tebrik ediyorum, güzel bir anlatım ve kodlama olmuş.
    Sormak istediğim şey ise;
    benim sitemin content(içerik alanı) ise sitenin ortasına hizalı, fakat sizin kodları eklediğim zaman sitemin içerik alanı sola dayalı oluyor, sebebi ve düzeltme yolu nedir acaba.
    İyi günler.

    1. Emre,

      demo koduna hiç müdahale etmeden css dosyalarını vb aldıysan, o kodların içinde html reset kodları da vardır. Ondan sola yaslı olmuştur. #backgroundPopup ile başlayan alandan sonarsını eklersen sitene ve öncesini kaldırabilirsen sıkıntı kalmayacaktır.

  20. Serkan Bey Merahabalr
    Benim farklı bir sorum olacak biraz ama :)
    popup içindeki yazı kısmını silip yotube den aldığımız bir videoyu embed yaptım video gelmedi ( intro gibi bişey yapmak istedim ama olmadı??
    Bu konuda yardımcı olabilir misiniz lütfen. Teşekkürler

    1. Veysel bey,

      İletişim alanını kullanarak yaptığınız işlemi tam şekilde anlatan (mümkünse ekran görüntüsüyle) şekilde gönderebilir misiniz? Normal şartlarda embed, iframe gibi durumlar popupContact divi içerisine eklendiğinde çalışacaktır.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir