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.