Modální okno (Modal)

Příklady z praxe

1. 01

   Potvrzení smazání objednávky v administraci

   Administrátor klikne na koš u objednávky a otevře se modální okno s otázkou a dvěma tlačítky. Nativní prvek dialog zajistí ztmavené pozadí, návrat fokusu na tlačítko koše a zavření klávesou Escape. Tlačítka pojmenovaná slovesem snižují riziko, že někdo potvrdí něco jiného, než čekal.

   <dialog id="confirmDelete" aria-labelledby="del-title">
     <h2 id="del-title">Smazat objednávku 2024-1187?</h2>
     <p>Akce je nevratná, doklady zůstanou v archivu.</p>
     <form method="dialog">
       <button value="cancel">Ponechat</button>
       <button value="delete">Smazat objednávku</button>
     </form>
   </dialog>
   
   <script>
     const dlg = document.getElementById('confirmDelete');
     document.querySelector('#trash').addEventListener('click', () => dlg.showModal());
     dlg.addEventListener('close', () => {
       if (dlg.returnValue === 'delete') deleteOrder('2024-1187');
     });
   <\/script>

2. 02

   Rychlý náhled produktu v e-shopu

   Modální okno s detailem produktu nechá zákazníka vybrat velikost bez opuštění výpisu kategorie, takže se po přidání do košíku vrátí přesně na místo, kde skončil. Problém nastane ve chvíli, kdy okno nemá vlastní adresu: zákazník pošle odkaz kamarádovi a ten uvidí jen kategorii. Řešením je při otevření přepsat URL přes History API a při zavření ji vrátit zpět.

   function openQuickView(slug) {
     history.pushState({ quickView: slug }, '', `/produkt/${slug}`);
     dialog.showModal();
   }
   
   window.addEventListener('popstate', () => {
     if (dialog.open) dialog.close();
   });

Časté omyly

MýtusStačí ztmavit pozadí a vycentrovat div, modál je hotový.

Ve skutečnostiZtmavené pozadí řeší jen vzhled. Bez přesunu a uvěznění fokusu, návratu fokusu po zavření, obsluhy Escape a atributu aria-modal je okno pro uživatele klávesnice a čteček obrazovky nepoužitelné, protože se z něj dá vytabovat do neaktivního obsahu pod ním.

MýtusModální okno a popup je totéž.

Ve skutečnostiPopup v prohlížeči je samostatné okno otevřené funkcí window.open a blokovače reklam ho běžně potlačí. Modální okno je součást téhož dokumentu, prohlížeč ho neblokuje a na rozdíl od popupu blokuje interakci se stránkou pod sebou.

MýtusModální okno vždy zhorší konverze, protože otravuje.

Ve skutečnostiZhorší je vynucený interstitial hned po vstupu na stránku. Modál vyvolaný akcí uživatele, typicky potvrzení objednávky nebo výběr varianty, konverzi naopak často zvyšuje, protože drží pozornost u jednoho rozhodnutí.

Časté dotazy

Kdy použít nativní prvek dialog a kdy vlastní komponentu?

Nativní prvek dialog s metodou showModal je dnes výchozí volba: prohlížeč sám zajistí vrstvu nad zbytkem stránky, backdrop, znepřístupnění obsahu pod oknem a zavírání klávesou Escape. Vlastní komponenta dává smysl, když potřebujete netriviální animaci vstupu a odchodu, vlastní správu vrstev u více současných panelů nebo integraci se stavovou knihovnou, která vykresluje obsah přes portál. V takovém případě počítejte s tím, že fokus, atributy ARIA i zamknutí scrollu musíte dodělat ručně a otestovat pouze klávesnicí.

Jak modální okno ovlivňuje SEO?

Obsah modálního okna, který je v HTML přítomen od začátku, vyhledávač zpravidla načte, ale skrytý obsah za interakcí má obvykle menší váhu než text viditelný na první pohled. Zásadnější je jiná věc: rušivé interstitialy, které na mobilu překryjí hlavní obsah hned po příchodu z vyhledávání, Google uvádí jako vzorec poškozující hodnocení stránky. Právně vyžadovaná oznámení, jako je souhlas s cookies nebo ověření věku, mezi problematické případy nepatří.

Má se modální okno zavírat kliknutím mimo něj?

Zavírání kliknutím do překryvné vrstvy je vhodné u nedestruktivních oken, kde uživatel nic nerozepsal: náhled obrázku, detail produktu, nápověda. U formulářů a potvrzení nevratných akcí je lepší tuto zkratku vypnout nebo se zeptat, protože kliknutí vedle okna je velmi častý omyl a ztráta vyplněných dat působí jako chyba aplikace. Klávesa Escape by naopak měla fungovat téměř vždy, případně s dotazem na zahození rozepsaného obsahu.

Jak se modální okno testuje?

Testování modálního okna začíná odloženou myší. Otevřete okno klávesnicí, ověřte, že fokus skočil dovnitř, projděte tabulátorem celý obsah a zkontrolujte, že se fokus cyklí a neuteče na odkazy pod oknem. Po zavření musí fokus přistát na spouštěcím prvku. Následuje čtečka obrazovky, kde se ověří, že se přečte název dialogu a že obsah pod ním není dostupný. Automatizovaně se hlídá zamčený scroll pozadí, funkce klávesy Escape a chování tlačítka Zpět v prohlížeči.

Zdroje

1. The dialog element(otevře se v novém okně)WHATWG HTML Standard
2. <dialog>: The Dialog element(otevře se v novém okně)MDN Web Docs
3. ARIA Authoring Practices Guide: Dialog (Modal) Pattern(otevře se v novém okně)W3C Web Accessibility Initiative
4. Web Content Accessibility Guidelines (WCAG) 2.2(otevře se v novém okně)W3C, 2023
5. History API(otevře se v novém okně)MDN Web Docs

Související pojmy

• Single Page ApplicationSingle Page Application je webová aplikace, která po prvním načtení obvykle nemění celý HTML dokument, ale aktualizuje rozhraní pomocí JavaScriptu a dat z API. Uživatel tak vnímá plynulejší navigaci, zatímco vývojář řeší klientský routing, stav aplikace, výkon prvního načtení a dopady na SEO.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• ACIDACID je sada čtyř vlastností databázové transakce: atomicity, consistency, isolation a durability. Zaručuje, že skupina zápisů proběhne jako jeden celek, neporuší definovaná pravidla databáze, nebude se nebezpečně míchat s jinými transakcemi a po potvrzení přežije pád systému, například při převodu peněz.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• Adresa v pamětiAdresa v paměti je číslo, kterým procesor jednoznačně označuje konkrétní buňku operační paměti, obvykle jeden bajt. Program pomocí adresy říká, odkud má data načíst nebo kam je zapsat. Adresy tvoří souvislý číselný rozsah, jehož velikost určuje šířka adresní sběrnice a architektura, typicky 32 nebo 64 bitů.
• AI agentAI agent je softwarový systém, který pomocí modelu umělé inteligence vnímá zadaný kontext, plánuje další kroky a samostatně volá nástroje nebo služby k dosažení cíle. Na rozdíl od jednorázového promptu udržuje stav úlohy, vyhodnocuje výsledky akcí a může opakovat postup, dokud nesplní zadání nebo nenarazí na limit.
• Alfa kanálAlfa kanál je složka obrazových dat, která u pixelu určuje míru neprůhlednosti nebo průhlednosti. Doplňuje barevné kanály, typicky RGB, a umožňuje plynulé okraje, stíny, překryvy, masky i skládání vrstev. Hodnota alfa sama neurčuje barvu, ale říká, jak se barva pixelu promíchá s pozadím.