Açılır Kapanır Pop Up Nasıl Yapılır ?

            Uzun bir zamandır bununla ilgili sağlam bilgi arıyordum. En sonunda buldum. Açılır Kapanır Pop up’u genelde ya duyuru için kullanırlar yada reklam için. Ben başka bir siteye reklam için kullandım. Örnek olarak; Forumtr ‘nin forum sayfasına girdiğimizde sol tarafta rahatlıkla görebiliriz. Fazla uzatmadan kodları vereyim.

</head> etiketinin hemen üstüne yazacağımız kod :

<script type="text/javascript">

function getCookieVal(offset) {
endstr = document.cookie.indexOf (";", offset)
if(endstr == -1) endstr = document.cookie.length
return unescape(document.cookie.substring(offset, endstr))
}
function GetCookie(name) {
arg = name + "="
alen = arg.length
clen = document.cookie.length
var i = 0
while (i < clen) {
j = i + alen
if(document.cookie.substring(i, j) == arg) return getCookieVal(j)
i = document.cookie.indexOf(" ", i) + 1
if(i == 0) break
}
return null
}
function SetCookie (name, value, per, exp) {
cstr = name + "=" + escape(value) + ";"
if(per){
addtime=(exp>0) ? exp : 31536000000
expdate = new Date()
expdate.setTime(expdate.getTime() + addtime)
expdate = expdate.toGMTString()
cstr+=" expires=" + expdate
}
document.cookie = cstr
}
function DeleteCookie(name) {
exp = new Date()
exp.setTime (exp.getTime() - 1)
cval = GetCookie(name)
if(cval != null)
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()
}
function expandCollapse(id,img){
var div = document.getElementById(id);
if (div.style.display=='none'){
div.style.display='block';
document.images[img].src='cmdCollapse.gif';
SetCookie(id,'block');
}
else {
div.style.display='none';
document.images[img].src='cmdExpand.gif';
SetCookie(id,'none');
}
}
function setDisplay(div,disp){
if (disp!=null) div.style.display=disp;
}
function setState(){
var div;
var i=1;
while (div=document.getElementById('Div'+(i++))) {
setDisplay(div,GetCookie(div.id));
}
while (div=document.getElementById('Img'+(i++))) {
setDisplay(div,GetCookie(div.id));
}
}
window.onload = setState;
</script>

Daha sonra aşağıdaki kodu Pop-Up’un etkin olmasını istediğimiz yere yazıyoruz.

<div id ="Div1" style="display:block;" class="Content">
 
         <script type="text/javascript"><!--
google_ad_client = "pub-6120736236915441";
/* 336x280, oluşturulma 23.01.2009 */
google_ad_slot = "2491401047";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<a href="#" onClick="expandCollapse('Div1','Img1')"><span class="style56">AÇ / KAPAT </span></a></div>

Yukarıda örnek olsun diye kendi AdSense Kodumu ekledim. Daha sonra onun yerine itediğiniz imgeyi koyabilirsiniz. Son olarak bu #Div1 ‘in style dosyasını “style.css” yada style grubunun içine koymamız gerekir.

#Div1 {
 position:fixed;
 left:448px;
 top:101px;
 width:336px;
 height:280px;
 z-index:1;
 background-color: #FFFFFF;
}

Yukarıda da belirtildiği üzere, fixed; pop up un sadece ekranda kalmasını sağlar.