jQuery ile Modal Popup (Açılır Pencere) Yapımı Örnek 1

Bazen sitelerde görürsünüz, tıklamalar veya herhangi bir olay (event) esnasında karşınıza küçük pencereler çıkar. İşte bu pencerelerin tasarımından kullanılabilirliğine kadar olan kısımları sizlere aktarmaya çalışacağım. Öncelikle penceremizin tasarım kısmını, yani css kısmını yapalım.
CSS Betiklerimiz

        *{padding:0px;margin:0px;font-weight:normal;font-size:inherit;border:none;border-spacing:0px;}
        body{font-family:Arial, Helvetica, sans-serif;background:#e9e9eb;font-size:12px;}
        .polo-siyah-ekran{position:absolute;left:0px;top:0px;z-index:10;opacity:0.7;background:#444;background-color:#444;cursor:pointer;}
        .polo-popup{position:absolute;z-index:15;min-width:250px;min-height:100px;-moz-box-shadow:0px 0px 0px 5px #3f3f3e;-webkit-box-shadow:0px 0px 0px 5px #3f3f3e;box-shadow:0px 0px 0px 5px #3f3f3e;border:0px !important;padding:0px;border-radius:6px 6px 6px 6px;background-color:#fff;}
        .polo-popup .baslik{position:relative;font-size:18px;width:96%;height:30px;background:#D8290A;padding-left:2%;padding-right:2%;line-height:30px;color:#fff;border-radius:6px 6px 0px 0px;}
        .polo-popup .kapat{position:absolute;top:0px;right:0px;width:30px;height:30px;cursor:pointer;content:'X';}
        .polo-popup .yazi{padding:10px 10px 6px 10px;font-size:14px;line-height:22px;}

Oluşturduğumuz CSS giydirmesinin nasıl olduğunu görelim.
HTML Çıktısı

Şimdi ise buna işlevsellik kazandıracak olan JavaScript/jQuery betiklerimizi yazalım. Fonksiyon olarak çalışan bu betiğimiz iki kısımdan oluşmaktadır. Fonksiyonun işlev olarak hem modal popup'ın ekranda gösterilmesini sağlıyor hem de oluşan modal popup'ın ekrandan silinmesini sağlıyor.
jQuery Betiklerimiz

function fnPolo_Popup(parIslem, parBaslik, parMesaj) {
	if (parIslem == "gizle") {
		$(".polo-siyah-ekran").fadeOut(500, function () { $(this).remove(); });
		$(".polo-popup").fadeOut(300, function () { $(this).remove(); });
	}
	else if (parIslem == "goster")
	{
		var intEkran_G = $(window).width();
		var intEkran_Y = $(window).height();
		var strHTML = "<div class=\"polo-siyah-ekran\" style=\"width:" + intEkran_G + "px;height:" + intEkran_Y + "px;\" onclick=\"javascript:return fnPolo_Popup('gizle', '', '');\"></div>";
		strHTML += "<div class=\"polo-popup\">";
		strHTML += "<div class=\"baslik\">" + parBaslik + "<div class=\"kapat\" onclick=\"javascript:return fnPolo_Popup('gizle', '', '');\" title=\"Kapat\">x</div></div>";
		strHTML += "<div class=\"yazi\">" + parMesaj + "</div>";
		strHTML += "</div>";
		$(".polo-popup").remove();
		$(".polo-popup-kapsul").html(strHTML);
		var intFare_X = $(window).scrollLeft();
		var intFare_Y = $(window).scrollTop();
		var intPopup_G = $(".polo-popup").outerWidth();
		var intPopup_Y = $(".polo-popup").outerHeight();
		var intX = (intEkran_G / 2) - (intPopup_G / 2) + (intFare_X);
		var intY = (intEkran_Y / 2) - (intPopup_Y / 2) + (intFare_Y);
		$(".polo-popup").css({ "left": "" + intX + "px", "top": "" + intY + "px" });
	}
}

Tıklandığında göstrilmesi için kullanım şekli şu şekildedir: Herhangi bir HTML elementi (a, span, div, p vs...) üzerinde onclick (tıklanınca) tanımı yapılmalıdır.
Örnek 1

<div class="polo-popup-kapsul"></div>
<a onclick="javascript:return fnPolo_Popup('goster', 'uyarı', 'mesajımız')">Tıkla</a>

Örnek 2

<div class="polo-popup-kapsul"></div>
<p onclick="javascript:return fnPolo_Popup('goster', 'uyarı', 'mesajımız')">Tıkla</p>