Eszköztár

100 Kezdőlap - Webszerkesztés - JavaScript - Modális ablak

Mintapélda

Modális ablaknak nevezzük azokat a felugró ablakokat, amelyek úgy jelennek meg a képernyőn, hogy bár a háttérben - jellemzően elhalványítva - látható mögöttük az eredeti tartalom, azok funkciói egészen addig nem lesznek használhatóak, amíg a felhasználó interakcióba nem lép a felugrott tartalommal. Webes környezetben a modális ablakok nem szeretett változatai a különböző erőszakos reklámok, ám modális ablak akkor is kialakítható, amikor a weboldal aktuális funkcióját meg kell szakítanunk valami közbülső opcióval. Valójában a modális ablak nem is igazi ablak, hiszen nem nyílik meg hozzá új böngésző felület, de még csak új frame-et sem alakítunk ki neki. A modális ablak technikailag csupán egy div, ami alapból nem látszik (CSS-ben display:none tulajdonsággal kerül létrehozásra), és melyet majd csak felvillanásakor teszünk láthatóvá (JavaScripttel beállítva neki a display:block tulajdonságot). Ezt a divet kiegészíti még egy másik, teljes képernyős, szürke, mérsékelten átlátszó div is, mely a maszkolást, vagyis az elhalványítást, a kitakarást valósítja meg. Kezdetben ez sem látszik a képernyőn, és szintén JavaScripttel állítjuk a láthatóságát.

Mikor szoktunk modális ablakot használni?

Szinte egészen biztos, hogy böngészései során már ön is találkozott ilyen ablakkal az alábbi szituációk valamelyike során:

• weboldalon sütik használatára való figyelmeztetésként;
• regisztrációs, vagy beléptető felület kialakításaként;
• hírlevélre való feliratkozás lehetőségeként;
• reklámfelületként;
• egy párbeszédes felület kiegészítő elemeként.

A felsorolt esetek közül mi most válasszuk az utolsó esetet egy lehetséges egyszerű minta bemutatására!

Modális ablak egy űrlap kiegészítéseként

Az űrlap-elemek című jegyzetünkben korábban megnéztük a párbeszédelemek kialakításának jó néhány egyszerű lehetőségét. Azonban elképzelhetőek olyan összetettebb feladatok, ahol az ott tárgyalt alapvető elemek kevésnek bizonyulhatnak. Képzeljünk el pl. egy olyan szabad szavas beíró mezőt, melyet valóban tetszőlegesen kitölthet a felhasználó, ám azt szeretnénk, hogy ezen lehetőség mellett akár a mező bizonyos alapértelmezett - vagy éppen más felhasználók által korábban megadott - lehetséges értékei közül is választhasson. Különösen ez utóbbi esetben olyan nagy mennyiségű választási lehetőséget kellene beépíteni egy előre definiált adatokkal kombinált beviteli szövegmező legördülő részébe, ami már átláthatatlanná, kezelhetetlenné is tehetné a párbeszédelemet. Ilyenkor jelenthet megoldást az a kiegészítő opció, ha a választási lehetőségek sokaságát nem egy helyben legördülő elemben kínáljuk hasznosításra, hanem egy jóval nagyobb területtel gazdálkodó modális ablak tartalmaként.

Első közelítésből nézzünk minderre egy könnyen emészthető, kevés adattal operáló változatot! A megvalósítás forráskódja az alábbi ábrára kattintva érhető el.

Bár ezen egyszerű példában könnyen tetten érhető a fentebb megfogalmazott cél - miszerint modális ablakból teremtsünk lehetőséget adatok átemelésére -, a szkeptikusok joggal mondhatják, hogy ehhez a feladathoz teljesen felesleges volt ekkora erőket mozgósítani, hiszen sokkal egyszerűbben is megoldható lett volna. Nyilván ez így is van, de hogy a modális ablak jelentőségében kétkedőket is megnyugtassuk, nézzünk meg egy jóval nagyobb adatmennyiséggel dolgozó, ám egészen hasonló szituációt jelentő feladatot.

Modális ablak nagyon sok adatból való választáshoz

Képzeljük el, hogy egy űrlapon valamilyen oknál fogva egykori általános iskolánk adatait kell megadnunk - ide értve annak pontos megnevezését, címét, illetve telefonos, e-mailes, és webes elérhetőségeit, valamint az igazgató nevét. Aligha valószínű, hogy egy ilyen komplexebb adattartalom írogatása különösebb örömöt vált ki a felhasználók többségéből, ezért érdemes lehet megkönnyíteni a helyzetüket, például az űrlap extra kitöltési lehetőségének biztosításával. A fenti űrlapról elérhető modális ablak táblázatának tartalma adatbázis létét valószínűsítheti a háttérben. Ez meg is felel a valóságnak, éppen ezért a modális ablakot létrehozó program kódjában PHP és MySQL részletek is fellelhetőek. Ám ettől függetlenül az alkalmazott JavaScript megoldások miatt talán így is érdemes lehet a vonatkozó forráskóddal ismerkedni, annak kliens oldali elemeit tanulmányozni.