Az előugró ablakok (vagy párbeszédpanelek) olyan modális ablakok, amelyek a felhasználó értesítésére vagy figyelmeztetésére, vagy a felhasználó általi input megszerzésére szolgálnak.
Az előugró ablakok megakadályozzák a felhasználót, hogy a felugró ablak bezárásáig hozzáférjen a program egyéb aspektusaihoz, ezért azokat nem szabad túlzottan használni.
A JavaScript-ben háromféle felugró módszert használnak: window.alert (), window.confirm () és window.prompt ().
Éber
A riasztási módszer azokat az üzeneteket jeleníti meg, amelyeknél a felhasználónak nem kell választ adnia. Miután meghívta ezt a funkciót, megjelenik egy figyelmeztető párbeszédpanel a megadott (opcionális) üzenettel. A felhasználóknak meg kell erősíteniük az üzenetet, mielőtt a riasztás megszűnik.
Példa:
window.alert("Welcome to our website");
megerősít
A megerősítési módszer hasonló window.alert(), de a felugró ablakban megjelenik egy Mégse gomb is. A gombok logikai értékeket adnak vissza: igaz az OK-ra és hamis a Mégse-re.
Példa:
var result = window.confirm('Are you sure?'); if (result === true) { window.alert('Okay, if you're sure.'); } else { window.alert('You seem uncertain.'); }
Gyors
Az azonnali módszert általában arra használják, hogy szövegbevitelt kapjon a felhasználótól. Ennek a függvénynek két argumentuma lehet, amelyek mindkettő opcionális: egy üzenet, amelyet a felhasználónak megjelenít, és egy alapértelmezett érték, amelyet a szövegmezőben kell megjeleníteni.
Példa:
var age = prompt('How old are you?', '100');
Egyéb tervezési lehetőségek:
Ha nem vagy elégedett az alapértelmezett JavaScript felugró ablakokkal, helyettesítheti őket a különböző felhasználói felület könyvtárakban. Például a SweetAlert szépen helyettesíti a szokásos JavaScript modálokat. CDN-en (tartalomszolgáltató hálózat) keresztül felveheti a HTML-be, és elkezdheti a használatát.
A szintaxis ilyen: swal(title, subtitle, messageType)
swal("Oops!", "Something went wrong on the page!", "error");A fenti kód a következő felugró ablakot hozza létre:
A SweetAlert korántsem az egyetlen helyettesítője a szokásos modáloknak, de tiszta és könnyen kivitelezhető.
Több információ:
- MDN window.alert ()
- MDN window.confirm ()
- MDN window.prompt ()