18 Ağustos 2017 Cuma
Twitter

Kendi ModalPopup'ımızı kendimiz yapalım :)

ModalPopupExtender'i kullandıysanız başlıca 2 sorunla karşı karşıyasınız demektir.

ModalPopupExtender’i kullandıysanız başlıca 2 sorunla karşı karşıyasınız demektir.

  1. ModalPopup aktifken Postback gerçekleştiğinde ModalPopup görünmez olur. Düşünsenize ModalPopup’ı yeni kayıt girişi için kullanacaksınız, tamam “boş geçilemesin”, “sadece sayı girilsin” gibi kontrolleri Validator’ler ile yapabiliyoruz ama code behind tarafında kontrol etmeniz gereken bilgiler varsa ve kullanıcıya uyarı mesajını gösterip kayıt bilgilerini gözden geçirmesini isteyecekseniz ModalPopup ile çalışmak çok da keyifli değildir.
  2. ModalPopup içerisinden bir başka ModalPopup açamazsınız. JavaScript ile çözülebilir bu sıkıntı ama yine de çok uygun bir çözüm olmuyor bu.

Ben de Panel ile ModalPopup yapabilir miyim diye düşündüm. ModalPopup göründüğünde arka planın kararması, arka plandaki nesnelere erişememe durumlarını nasıl sağlayabileceğimi araştırdım.

Sonunda güzel bir çözüm ürettim kendimce.

Şimdi sırasıyla şunları yapıyoruz:

1) Sayfamıza bir adet Panel ekliyoruz. Bu paneli arka planı karartmada ve arka plandaki nesnelere erişimi kapatmada kullanacağız.

<asp:Panel ID="pnlHider" runat="server" CssClass="hider" Visible="false">
</asp:Panel>


Bunun css ini vereyim:

.hider
{
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 99;
    background-color: Black;
    opacity: 0.2;
    filter: alpha(opacity=20);
}

 

2) Şimdi de ModalPopup işlevi görecek bir Panel ekleyelim:

<asp:Panel ID="pnlModalPopup" runat="server" Visible="false" CssClass="popupbox">
                 Birşeyler… birşeyler…
</asp:Panel>


Bu panelin css ini de vereyim:

.popupbox
{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 500px;
	height: 450px;
	margin-top: -225px; /*yüksekliğin yarısı olmalı*/
	margin-left: -250px; /*genişliğin yarısı olmalı*/
	border: 2px solid #555;
	z-index: 100;
	background-color: #fff;
	padding: 10px;
	-moz-box-shadow: 10px 10px 5px rgb(50,50,50);
	-webkit-box-shadow: 10px 10px 5px rgb(50,50,50);
	box-shadow: 10px 10px 5px rgba(50,50,50,0.3);
}


position, height/width ve margin-top/margin-left değerleri, panelin sayfada ortalanması için kullanılıyor. Siz istediğiniz yüksekliği ve genişliği verebilirsiniz.

Bu iki Panel i bir de UpdatePanel içerisine aldık mı işlem tamamdır. :)

Şimdi de bir örnek oluşturalım:

Sayfamızdaki buton aracılığı ile popup ı açalım. Bir tane textbox ımız, ekleme ve kapatma butonları olsun. Textbox a girilen bilgi 5 karakterden uzunsa işlem tamammış diye kabul edelim ve ekrandaki bir label a sonucu aktaralım. 5 karakterden uzun değilse de uyarı mesajı verelim.

<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<asp:UpdatePanel ID="up" runat="server">
	<ContentTemplate>
		<asp:Panel ID="pnlHider" runat="server" CssClass="hider" Visible="false">
		</asp:Panel>
		<asp:Button ID="btnModalPopupGoster" runat="server" Text="Modal Popup'ı aç" OnClick="btnModalPopupGoster_Click" />
		<asp:Label ID="lblGirilenBilgi" runat="server" />
		<asp:Panel ID="pnlKayitEkle" runat="server" Visible="false" CssClass="popupbox" DefaultButton="btnEkle">
			<span style="float: right;">
				<asp:ImageButton ID="ibModalPopupKapat" runat="server" ImageUrl="/images/cikis.png"
					ToolTip="Kapat" OnClick="ibModalPopupKapat_Click" />
			</span>
			<br />
			<h2>
				Yeni kayıt</h2>
			<hr />
			Adınızı giriniz:
			<asp:TextBox ID="txtAd" runat="server" Width="200px" /><asp:Label ID="lblAdUyari"
				runat="server" Text="<br/>En az 5 karakter olmalı" Visible="false" ForeColor="Red" />
			<br />
			<asp:Button ID="btnEkle" runat="server" Text="Ekle" OnClick="btnEkle_Click" />
			<asp:Button ID="btnKapat" runat="server" Text="Vazgeç" OnClick="ibModalPopupKapat_Click" />
		</asp:Panel>
	</ContentTemplate>
</asp:UpdatePanel>
</form>

Code Behind:

protected void btnEkle_Click(object sender, EventArgs e)
{
	lblAdUyari.Visible = false;
	if (txtAd.Text.Length < 5)
	{
		lblAdUyari.Visible = true;
		return;
	}
	lblGirilenBilgi.Text = txtAd.Text;
	ibModalPopupKapat_Click(null, null);
}
protected void ibModalPopupKapat_Click(object sender, EventArgs e)
{
	pnlKayitEkle.Visible =
	pnlHider.Visible = false;
}
protected void btnModalPopupGoster_Click(object sender, EventArgs e)
{
	pnlKayitEkle.Visible =
	pnlHider.Visible = true;
}

ModalPopup ile Hider’i aynı anda açıp kapatıyoruz.

İşlem tamamdır. Sonucu kendiniz test edebilirsiniz. :)

Projeyi buradan indirebilirsiniz.

Herkese kolay gelsin.
 

Değerlendirme

Yazım dilinin sadeliği ve anlaşılabilirliği Puan: 4,74 (6 oy)
Yazıdaki kodların kalitesi Puan: 4,93 (5 oy)
İhtiyaca cevap verme Puan: 4,83 (5 oy)
Tavsiye edilebilirlik Puan: 4,81 (5 oy)
Genel değerlendirme Puan: 4,91 (6 oy)
Puanlamalar 5 üzerindendir.
  • Site Yorumları
  • Facebook Yorumları Facebook Yorumları
Yeni yorum yaz Toplam: 15, Onay bekleyen: 0.
  1. Nurgül

    Öncelikle çok teşekkür ederim. Gerçkten başarılı. Fakat sayfayı yeniden başlatmamdan sürekli karşıma çıkıyor. Pageloada pnlKayitEkle.Visible = pnlHider.Visible = false; yazdım yinede çıkıyor nasıl çözebilirim ?

  2. Muhammed

    Merhabalar, bunu master page olan projede nasıl yazabiliriz.

  3. acemicaylak

    Hocam ellerinize sağlık. Uzun zamandır böyle birşey arıyordum, imdadıma yetişti. Ancak sayfamda bulunan 5 adet butona ayrı ayrı panelleri visible ile açıp kapatmak istiyorum ancak ilk yaptığım buton ile açılıyor, sonraki butonlar ile diğer paneller açılmıyor. Açılması için butona tıkladığımda her seferinde false dönüyor. Bu konuda yardımcı olursanız sevinirim.

  4. newDeveloper

    Allah razı olsun inşaAllah, tam ihtiyaca uygun hazırlanmış, çok teşekkürler.

    • Devrim Altınkurt

      :)

  5. ercument uzar

    Hocam özür dilerim, çalışmanızı aldım, emeğinize sağlık. Saatlerdir böyle bir şey arıyordum ama biraz farklı. Siteye girildiğinde form yerine resim direk olarak açılacak, sonra kapatma tuşundan kapatacak giren. Popup olacak ama engellenmemesi önemli, spor okulu kayıtları başladı diye broşür çıkacak resimde. Yardımınızı rica ediyorum, teşekkürler.

    • Devrim Altınkurt

      yazıdaki kodlar tam istediğin gibi. form yerine resim getirebilirsin. :)