ModalPopupExtender GyIK

Az AJAX Control Toolkitben lévő ModalPopupExtender (MPE) igen hasznos vezérlő, előszeretettel használjuk olyan helyzetekben, amikor az információ nem fér ki az oldalra vagy a felhasználó figyelmét az információk egy részére kell szűkíteni. Sajnos a dokumentációból hiányoznak olyan információk, amibe mindenki előbb-utóbb belefut.

Kommunikáció az oldal többi részével

Bár a ModalPopupExtender által megjelenített felugró ablak külön ablaknak tűnik, az valójában az oldal része. Tipikusan egy div (ez lesz az asp:Panelből), ami mindig ott figyel az oldalon, csak éppen többnyire rejtve van. Amikor az MPE megjeleníti, akkor ráadásul beállítja rá, hogy position:absolute és z-index:10001, ettől kerül minden más tartalom fölé.

Ha tehát az a feladatunk, hogy a felugró ablakból elérjük az oldal többi részét, például JavaScriptben, akkor ugyanúgy kell megírnunk a kódot, mintha nem is lenne MPE.

Villanás az oldal betöltésekor

Előfordulhat, hogy az oldal betöltésekor látjuk egy pillanatra felvillanni az MPE által generált ablakot, majd rögtön el is tűnik. A megoldás az, hogy a PopupControlID tulajdonságban megadott vezérlőre (tipikusan asp:Panelre) beállítjuk, hogy style=”display:none”. A tapasztalat azt mutatja, hogy ezt nem jó CSS osztályban beállítani, mert akkor nem működik minden böngészőben jól az MPE.

A háttér elsötétítése

Az MPE ablaka akkor válik valóban felugrónak látszóvá, ha jól elkülönül az oldal többi részétől. Bár be lehet állítani az MPE-nek, hogy DropShadow=”true”, szerintem rém gagyi az az árnyék, amit rajzol. Ennél sokkal jobb árnyékokat szokás manapság rajzolni. Egy lehetséges alternatíva a háttér elsötétítése valamilyen mértékben. Ezt szerencsére támogatják a mai böngészők, természetesen mindegyik más CSS szintaxissal. Ha a BackgroundCssClass=”popupBackground”, akkor a háttér CSS osztály lehet például ez (40%-os átlátszóság):

  div.popupBackground
  {
    background-color: Black; 
    filter:alpha(opacity=40);
    opacity: .40;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  }

Szerver oldali kód OK-nál

Gyakran előfordul, hogy a felugró ablakra teszünk Mehet és Mégsem gombokat, amiből a Mégsem esetén elég bezárni az ablakot, a Mehetnél viszont szerver oldali kódot kellene futtatni. Mindkét gombhoz használhatunk asp:Button vezérlőt és a Mehet gombnál a szokásos módon feliratkozhatunk a Click eseményre a code behindban. Arra kell csak odafigyelnünk, hogy az OkControlID tulajdonságot ne állítsuk be az MPE-n, a CancelControlID-nak viszont adjuk meg a Mégsem gomb szerver oldali azonosítóját (amit az asp:Button elemben az ID tulajdonságnál megadtunk). Az Ok/CancelControlID tulajdonságokban megadott gomb ugyanis nem fog postbackelni, annak működését felülírja az MPE.

Kinyitás szerver oldali kódból

Miután a felugró ablakban lévő valamelyik vezérlő postbackel és lefut a szerver oldali kódunk, az oldal újratöltődik és a popup ablak eltűnik. De mi van akkor, ha épp a felugró ablakban megadott valamilyen érték nem megfelelő és ott szeretnénk akár kézzel, akár egy CustomValidatorral hibaüzenetet megjeleníteni? Ez esetben a szerver oldali eseménykezelőből nekünk kell manuálisan felugrasztani az MPE ablakát, erre szolgál a Show() metódus. Ha épp el akarjuk rejteni, akkor hívhatjuk a Hide()-ot code behindban.

Advertisements

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s