Modal je překryvné okno (overlay), které se otevře nad hlavním obsahem a vyžaduje interakci uživatele. Slouží k řešení konkrétního úkolu nebo potvrzení akce a dočasně blokuje přístup k ostatnímu obsahu aplikace.
WCAG 2.2Klávesnice
Hlavička s ikonou, titulkem a description
Obsah modalu
Zavírací tlačítko
Action zóna
Použití
Kdy používáme
Pokud je potřeba získat jasné potvrzení od uživatele (delete, submit).
Pro krátké úkoly nebo doplňující formuláře.
Pro upozornění na kritické informace (např. chyba, varování).
Pro načítání obsahu z jiné domény (architektura Microfrontendů)
Kdy nepoužíváme
Pro rozsáhlý obsah nebo dlouhé formuláře (lepší je side sheet nebo samostatná stránka).
Pokud akce není dostatečně důležitá → modal je intruzivní.
Pokud by příliš časté používání rušilo uživatelský tok.
Varianty
Základní varianta
Základní modal s hlavičkou, obsahem a action zónou.
Live preview
Zvolit téma:
Zavření kliknutím na pozadí
Modal lze nakonfigurovat tak, aby se zavřel při kliknutí na tmavé pozadí (backdrop).
Live preview
Zvolit téma:
Posuvný modal
Modal lze posouvat za záhlaví na různá místa obrazovky.
Live preview
Zvolit téma:
Maximalizovatelný modal
Modal s možností maximalizace na celou obrazovku s drobným okrajem.
Live preview
Zvolit téma:
Window
Modal s možností maximalizace na celou obrazovku bez okraje.
Live preview
Zvolit téma:
Info varianta
Modal s hlavičkou, obsahem ale bez action zóny. Používá se pro zobrazení informací, které nevyžadují potvrzení.
Live preview
Zvolit téma:
Responsivita
Modal automaticky přizpůsobuje svou šířku velikosti obrazovky pomocí breakpointů. Na menších zařízeních zabírá více místa pro lepší použitelnost.
Live preview
Zvolit téma:
Pokud obsah modalu přesáhne výšku viewportu, automaticky se zobrazí scrollbar pro procházení obsahu.
