SEO (Arama Motoru Optimizasyonu) Mikro İnteraktif ÜCRETSİZ - Google Play'den İndirin

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

Yeni bir jQuery dersimizde, basit ve kullanışlı bir modal popup (açılı pencere) yapımını sizlere aktaracağım.

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ı
jQuery ile Modal Popup (Açılır Pencere) Yapımı Örnek 1

Ş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>
Örnek

Yorumlar

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

REKLAM

Çocuk Etkinlikleri Uygulaması

EN

  • Popüler
  • Yeni
  • Son Yorum