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

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.
 

---

#modal #modalpopup #modalpopupexteder #hider