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

  • barış uğurlu

    barış uğurlu:

    1 ay önce

    Merhabalar kolay gelsin öncelikle paylaşımınız için teşekkür ederim ancak internette en azından türkçe kaynakta bulamadığım bir şey sormak istiyorum bir img nin üstüne gelince popup butonu show olsa üstünden çıkınca gözükmese tıklayıncada popup i acan bi örnek yapma imkanınız varmıdır veya bir kaynağa yönlendire bilirmisiniz teşekkürler
    0 cevapla
  • Yönetici Yorumu:

    1 ay önce

    Bahsettiğiniz şey, üzerine gelince popup olarak göstersin, üzerinden ayrılınca popup kapansın mı?
  • Sadi ilgün

    Sadi ilgün:

    1 yıl önce

    Paylaştığınız çalışma çok güzel... Elinize sağlık, paylaştığınız için de teşekkür ederim.... Form gibi bir bilgiyi , ilgili linke tıkladığımda form büyüklüğünde bir çerçeve ile popup gibi açıp işlem yaptırabilir miyim? Bu şekilde bir çalışmanız mevcut mu? İyi geceler, iyi çalışmalar dilerim.
    2 cevapla
  • Yönetici Yorumu:

    1 yıl önce

    İlginiz için teşekkürler. Anladığım kadarıyla açılan popup içerisinde form olmasını istiyorsunuz. Açıkcası bununla ilgili bir çalışma yapmadım. Eğer ki çözüm arıyorsanız arama motorlarına "jQuery Responsive Modal Popup" şeklinde yazarsanız size birçok kaynak yardımcı olacaktır. İyi çalışmalar.

Yorum Yaz

Avatar

REKLAM

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

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum