Modální formulář
důležitost: 5
Vytvořte funkci zobrazDotaz(html, callback), která zobrazí formulář se zprávou html, vstupním polem a tlačítky OK/STORNO.
- Uživatel by měl něco napsat do textového pole a stisknout Enter nebo tlačítko OK, pak bude volána funkce
callback(hodnota)s hodnotou, kterou zadal. - Jinak pokud uživatel stiskne Esc nebo STORNO, bude voláno
callback(null).
V obou případech bude proces vstupu ukončen a formulář se odstraní.
Požadavky:
- Formulář by měl být uprostřed okna.
- Formulář je modální. Jinými slovy, není možná žádná interakce se zbytkem stránky, dokud ho uživatel nezavře.
- Když se formulář zobrazí, fokus by měl být nastaven na
<input>pro uživatele. - Klávesy Tab/Shift+Tab by měly přepínat fokus mezi poli formuláře a neměly by umožnit odchod na jiné prvky stránky.
Příklad použití:
zobrazDotaz("Zadejte něco<br>...chytrého :)", function(hodnota) {
alert(hodnota);
});Demo ve vnitřním rámu:
P.S. Zdrojový dokument obsahuje HTML/CSS pro formulář s fixní pozicí, ale učinit ho modálním je už na vás.
Modální okno lze implementovat pomocí poloprůhledného <div id="zakrývající-div">, který zakrývá celé okno, například:
#zakrývající-div {
position: fixed;
top: 0;
left: 0;
z-index: 9000;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.3;
}Protože tento <div> vše překrývá, bude všechna kliknutí dostávat on, ne stránka za ním.
Můžeme také zabránit rolování stránky nastavením body.style.overflowY='hidden'.
Formulář by neměl být v tomto <div>, ale vedle něj, jelikož nechceme, aby měl opacity.