Modal olarak adlandırılan özel pencereler kullanıcının en çok dikkatini çeken ve kullanıcının bu pencere ile etkileşime girmeden, önceki sayfaya dönmesine izin vermeyen pencerelerdir.

Doğru kullanıldığında faydası yüksek olan modal window (iletişim pencereleri), yanlış kullanıldığında kullanıcının siteyi hemen terketmesine neden olacaktır. Bu nedenle iletişim pencerelerinin en iyi ve mantıklı şekilde nasıl kullanılacağını iyi bilmeli, stratejiyi doğru geliştirmelisiniz.

İletişim pencereleri kullanıcının sayfa üzerinde odaklanacağı noktayı belirler. Kullanıcı girişleri (login ekranları), kayıt formları gibi birçok durumda kullanılması uygun olan iletişim pencerelerini Facebook, fotoğrafları görüntülemek için kullanmıştır. Facebook üzerinde bir fotoğrafa tıkladığınızda ekran kararır ve ekranın ortasında sol tarafta fotoğraf, sağ tarafında da kullanıcı bilgileri, yorumlar ve reklamlar gibi öğelerin yer aldığı bir pencere açılır. Bu pencere tek bir fotoğrafın değil, o fotoğrafı takip eden diğer fotoğraflarında görüntülenmesini sağlar. Bir önceki ekrana dönmek için iletişim penceresinin sağ üst köşesinde bulunan X ikonuna, klavye üzerindeki ESC tuşuna ya da ekranın koyulaşan alanında herhangi bir yere tıklamak yeterlidir.

Modal Window (İletişim Penceresi) Kodlaması

Önce jQuery Nedir? başlıklı yazımızı okuyun. Sonra da HTML, CSS ve jQuery kullanarak bir iletişim penceresini nasıl uygulayabileceğimizi görelim.

İletişim Penceresi Kodları

Öncelikle kullanıcının tıklayacağı linki ve  bir div etiketi yaratalım ki kullanıcı linke tıkladığında bu div’i çağırsın ve etiketin içinde bulunan içerik açılsın. Bu div, içeriğinde bir mesaj, giriş ya da kayıt formu gibi herhangi bir şey bulundurabilir.

<a href="#dialog" name="modal" class="title">Tıklayın</a>

<div id="box">
<div id="dialog" class="window">
Modal Window
<a href="#"class="close"/>Kapat</a>
</div>

<div id="mask"></div>
</div>

Amacımız iletişim penceresindeki öğelerin linke tıklandığında görünmesi olduğundan, varsayılan olarak bu öğeler gizli olmalıdır.

#mask {
 position:absolute;
 left:0;
 top:0;
 z-index:9000;
 background-color:#000;
 display:none;
}

#box .window {
 position:fixed;
 left:0;
 top:0;
 width:440px;
 height:200px;
 display:none;
 z-index:9999;
 padding:20px;
}

#box #dialog {
 width:375px;
 height:203px;
 padding:10px;
 background-color:#ffffff;
}

Şimdi de script etiketleri arasına eklememiz gereken kodları yazalım.

$(document).ready(function() {    

$('a[name=modal]').click(function(e) {
//Cancel the default link behavior
e.preventDefault();

var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);

var winH = $(window).height();
var winW = $(window).width();

$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

$(id).fadeIn(2000); 

});

// Kapat butonuna tıklandığında kapansın.
$('.window .close').click(function (e) {
  //Cancel the link behavior
  e.preventDefault();

$('#mask').hide();
$('.window').hide();
});        

// Koyu alana tıklandığında kapansın.
$('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
});            

$(window).resize(function () {
    var box = $('#box.window');

var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
var winH = $(window).height();
var winW = $(window).width();
box.css('top',  winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);
});
});​