CSS ve Javascript ile Modal Dialog / Reklam Kutusu yapımı

Daha önce şu yazımda javascript ile zamanlama fonksiyonu hazırlamayı, şu yazımda ise CSS ile site üzerinde kayan reklam hazırlamayı anlatmıştım. Şimdi ise bu iki fonksiyonu birlikte kullanıp belirli bir süre ekranda herşeyin önünde durup sonra otomatik olarak kapanan bir modal dialog (reklam kutusu/ad box) hazırlamayı anlatacağım.

İşin aslı bizim hazırlayacağımız bu uygulama tam olarak bir modal dialog sayılmaz, sürükle-bırak gibi bir takım özellikleri bulunmuyor, biz sadece modal dialog gibi hareket eden div konteynerlar hazırlayacağız ve bunu her zamanki gibi satırlarca javascript kodu kullanmadan yapacağız.

Bu dialog kutusu ne işe yarar?
Ekranda herşeyin önünde açılan bir kutucuk ile neler yapılabileceği size kalmış, ister duyuru yapın isterseniz günün resmi/günün videosunu yayınlayın. Çoğu webmaster bu tip uygulamalar aracılığıyla reklam yayınlıyor fakat ben de bir Adsense yayıncısı olarak bu gibi bir uygulama yüzünden daha önce Google’dan uyarı aldığımı ve her sayfanızda bu gibi bir uygulamayla reklam yayınlamanızın kullanıcı açısından oldukça rahatsız edici olabileceğini belirtmemde fayda var.

İşe ilk olarak aşağıdaki satırı <html> tagından önce, kod betiğinin en tepesine ekleyerek başlıyoruz, bu satır scriptimizin IE üzerinde verimli çalışması için gerekiyor:

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Daha sonra CSS sitil bilgilerini içeren bir dosya hazırlayıp bunu style.css adıyla kaydediyoruz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/*
    Yazar: Caner ÖNCEL
    Web: http://www.egonomik.com
    E-Mail: egonomik@gmail.com
*/


body {
    font-family: Tahoma;
    font-size: 11px; }

/**** Zemin renkleri ****/
.kirmizi {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    background-image: url('images/kirmizi.png'); }
   
.mavi {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    background-image: url('images/mavi.png'); }
   
.yesil {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    background-image: url('images/yesil.png'); }    
   
.siyah {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    background-image: url('images/siyah.png'); }
   
/*** Diğer Kutular ***/
.mesaj {
    width: 350px;
    padding: 15px;
    color: #FFFFFF;
    border: 2px solid #5F5F5F;
    background-image: url('images/siyah.png'); }

.mesaj_bar {
    width: 350px;
    padding-left: 15px;
    padding-right: 15px;
    border: 2px solid #5F5F5F;
    background-color: #5F5F5F; }
   
.mesaj img {
    border: 1px solid #5F5F5F; }

.minimize {
    position: fixed;
    left: 2px;
    bottom: 2px;
    width: 100px;
    border: 2px solid #5F5F5F;
    background-color: #5F5F5F; }    
   

/**** Butonlar ****/
.mybutton {
    margin-right: -15px;
    cursor: pointer;
    color: #828282;
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
    background-color: #272727;
    border: 2px solid #5F5F5F; }
   
.mybutton2 {
    margin-right: -5px;
    cursor: pointer;
    color: #828282;
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
    background-color: #272727;
    border: 2px solid #5F5F5F; }
   
.mybutton_hov {
    margin-right: -15px;
    cursor: pointer;
    color: #FFFFFF;
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
    background-color: #700202;
    border: 2px solid #5F5F5F; }  
   
.mybutton2_hov {
    margin-right: -5px;
    cursor: pointer;
    color: #FFFFFF;
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
    background-color: #700202;
    border: 2px solid #5F5F5F; }

Sitil bilgilerini </head> tagından hemen önce ekleyeceğimiz aşağıdaki kod ile çağırıyoruz:

1
<link rel="stylesheet" type="text/css" href="style.css">

Daha sonra yine </head> tagından önce aşağıdaki javascript kodlarını ekliyoruz:

1
2
3
4
5
6
7
8
9
10
<!--# Scriptler #-->
<script language="javascript" type="text/javascript">
function showMe(blockId)  {
  document.getElementById(blockId).style.display = "block";  }
function hideMe(blockId)  {
  document.getElementById(blockId).style.display = "none";  }
function Renk(classId,yeniClass){
  document.getElementById(classId).className = yeniClass; }
</script>
<!--# Scriptler #-->

Bundan sonra reklam kutusunun ekranda ne kadar süre kalacağını belirleyen, zamanlayıcı scriptlerimizi içeren bir dosya oluşturup bunu timer.js adıyla kaydediyoruz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var sure = 20; // Kutu ekranda kaç saniye kalacak?
var saniye = document.getElementById('kalan').innerHTML = sure+ 1;

function final() {
  if (saniye!=1) {
    saniye-=1;
    document.getElementById('kalan').innerHTML  = saniye;  }

  else{
    hideMe('modal');
    return;   }
    setTimeout("final()",1000); }
     
final();

Son olarak modal dialog gibi hareket edecek olan div konteynerlarımızı hazırlıyor ve hızlı yüklenmesi için <body> tagından hemen sonra ekliyoruz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!--# Reklam Kutusu #-->
<div id="modal" class="siyah">
<table border="0" width="100%" height="100%">
    <tr>
        <td width="100%" height="100%" align="center" valign="middle">
       
        <!-- Başlık -->
        <div class="mesaj_bar" align="right">
       
        <!-- Zamanlayıcı -->
        <b><span id="kalan"></span></b>
        <script language="javascript" src="timer.js"></script> saniye içinde kapanacak
        <!-- Zamanlayıcı -->

        <input class="mybutton2" type="button" value="_" onclick="hideMe('modal');showMe('minimize');" id="mybutton2" onmouseover="Renk('mybutton2','mybutton2_hov');" onmouseout="Renk('mybutton2','mybutton2');">
        <input class="mybutton" type="button" value="X" onclick="hideMe('modal');" id="mybutton" onmouseover="Renk('mybutton','mybutton_hov');" onmouseout="Renk('mybutton','mybutton');">
        </div>
        <!-- Başlık -->
               
        <!-- Mesaj İçeriği -->
        <div id="mesaj" class="mesaj">     
       
        <a href="http://www.egonomik.com/" title="Egonomik.com" target="_blank"><img src="images/egonomik-logo.png" height="105"></a><br>
        Egonomik.com: Bir webmasterın yaşam blogu!
       
        <div align="right" style="padding-top: 6px">   
        Zemin rengi:
        <a href="javascript:void(0);" title="Siyah" onclick="Renk('modal','siyah');"><img src="images/siyah.png" height="15"></a>
        <a href="javascript:void(0);" title="Kırmızı" onclick="Renk('modal','kirmizi');"><img src="images/kirmizi.png" height="15"></a>
        <a href="javascript:void(0);" title="Mavi" onclick="Renk('modal','mavi');"><img src="images/mavi.png" height="15"></a>
        <a href="javascript:void(0);" title="Yeşil" onclick="Renk('modal','yesil');"><img src="images/yesil.png" height="15"></a>
        </div>             
        </div
        <!-- Mesaj İçeriği -->      
       
        </td>
    </tr>
</table>
</div>
<!--# Reklam Kutusu #-->

<!-- Minimize -->
<div id="minimize" class="minimize" align="right" style="display:none">
Kutuyu Göster
<input class="mybutton" type="button" value="»" onclick="hideMe('minimize');showMe('modal');" id="mybutton3" onmouseover="Renk('mybutton3','mybutton_hov');" onmouseout="Renk('mybutton3','mybutton');"></div>
<!-- Minimize -->

Burada temel olarak iki tane div kullanıyoruz, bunlardan bir tanesi style.css içerisinde modal id’siyle zemin rengini oluşturuyor, diğeri ise .mesaj id’siyle öndeki kutucuğu. Ben içerik olarak Egonomik.com’a ait bir resim kullandım, siz içeriğinizi görüntülemek için bu kısmı değiştireceksiniz. Ayrıca kutucuğun yüksekliği dinamik olduğu gibi isterseniz genişliğini .mesaj isimli class tanımlamasından değiştirebilirsiniz (width: 350px;).

Ayrıca daha önce herhangi bir modal dialog uygulamasında şahsen rastlamadığım farklı bir özellik oluşturdum; zemin rengi. İsterseniz kullanıcınıza modal dialogun arkaplan rengini sayfa değişmeden değiştirme şansı verebilirsiniz. Bu gibi bir script için çok mantıklı bir özellik mi derseniz bilmem, şahsen ben scripti geliştirmeyi düşündüğümden ilerisi için böyle bir özellik koymayı uygun buldum.

Eğer reklam kutucuğunun belirli bir süre sonra kapanmasını istemiyorsanız <!– Zamanlayıcı –> kısmını silin, böylece timer.js dosyasına da ihtiyacınız kalmıyor.

Geliştirmeye açık olan scriptle ilgili gözünüze takılan hataları ve düşüncelerinizi benimle paylaşırsanız sevinirim. Ayrıca lütfen scripti sitenizde yayınlarken adımı silmek yerine kaynak göstermeyi deneyin.

Scriptin çalışan demosu:
Demo

Tüm dosyaları .zip olarak indir:
Download

Facebook Yorumları

6 Yorum

  1. rusensahin

    Reklam kutusu, sitede varolan flashların ve google adsense reklamlarının altında kalıyor. Bunu düzeltmenin bir yolu var mı?
    İyi Çalışmalar…

  2. Flash ve adsense kodları kutunun üstünde çıkıyorsa şunu yapıyorsunuz.

    css ye

    #modal {
    position:absolute;
    z-index:9999;
    }

    bunu yapınca görebildiğiniz herşeyın üstüne çıkar.

  3. evett, kendi adresimde kullandım çokda güzel oldu,

    formu değiştirdim, çocuk oyun sitesi oldugu ıcın timere arka planı rastgele getir dedim, kırmızı begenmedım cıkarttım.

    Cookie kontrolu yaptırdım günde 1 kez çıakcak şekilde ayarladım.

    Ben facebook & twitter hayran takip olayı için yaptım.

    bakın bakalım nasıl olmuş

    http://www.korsanoyun.com

    Not : 1 kez göründükten sonra tekrar görmek isterseniz cookie resetleyın

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

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