Chytrá komponenta
Modal
Okno přes ztmavenou stránku. Dokud ho nezavřete, se zbytkem stránky pracovat nejde. Na telefonu vyjede zespodu.
Otevírání i zavírání zvládne samotné HTML. V náhledu je okno otevřené, zavřete ho a zkuste ho otevřít znovu.
Struktura
Tlačítko a schované okno
Okno je element dialog. Dokud ho neotevřeme, není vidět. Na stránce je tlačítko, kterým ho za chvíli otevřeme.
Tlačítko zatím nic nedělá. Okno je v HTML, ale schované.
Atributy
Otevřít bez JavaScriptu
Tlačítku řekneme, které okno ovládá (commandfor) a co s ním má udělat (command). Hodnota show-modal okno otevře jako modální.
Modální znamená, že stránka za oknem zešedne a nedá se na ni kliknout. Klávesnice skočí do okna a Esc ho zavře.
Atributy
Zavřít tlačítkem i kliknutím vedle
Do okna přidáme tlačítko s command="close". Atribut closedby="any" dovolí okno zavřít i kliknutím na ztmavenou stránku.
Okno potřebuje vždy viditelné tlačítko pro zavření. Esc ani klik vedle nemusí každý znát.
Styl
Okno a ztmavené pozadí
Okno dostane zaoblené rohy, stín a rozumnou šířku. Pseudoelement ::backdrop je vrstva mezi stránkou a oknem. Ztmavíme ji a stránku za ní rozmažeme.
Okno je uprostřed obrazovky samo. To zařídí prohlížeč u každého modálního dialogu.
Automatika
Na telefonu panel zespodu
Na telefonu okno přilepíme ke spodnímu okraji přes celou šířku. Je blíž palci a vypadá jako panel, na jaký jsou lidé zvyklí z mobilních aplikací.
margin: auto 0 0 dá nad okno všechno volné místo, a tak okno sjede dolů. Tlačítko přes celou šířku se snáz trefí palcem.
Recept
Modal v kostce
dialog+command="show-modal": modal bez JavaScriptu- Esc, klik vedle a tlačítko Zavřít
::backdropztmaví stránku za oknem- na telefonu panel u spodního okraje
Atributy command a commandfor jsou v HTML nové. Ve starších prohlížečích tlačítko nic neudělá a okno je potřeba otevřít JavaScriptem: dialog.showModal().