Dialogy a modály jsou nedílnou součástí většiny webových aplikací. I když jejich ruční tvorba není složitým úkolem, je to úkol, který se rychle stane únavným pro každého webového vývojáře. Obvyklou alternativou k jejich ručnímu stavění je použití komponentu postaveného někým jiným.

Tento přístup má však několik problémů. Existuje tolik možností, že je těžké zjistit, která komponenta by byla nejlepší použít, a přizpůsobení vzhledu takových komponent může být někdy stejně zdlouhavé jako vytváření dialogu ručně. Naštěstí existuje další alternativa: prvek dialogu HTML.

Co je to Dialogový prvek?

Element dialogu HTML je vestavěná značka HTML (jako div nebo span), která umožňuje vývojářům vytvářet vlastní dialogy a modály. Dialogový prvek existuje v Chrome a Opeře od roku 2014, ale teprve nedávno jej začaly podporovat všechny hlavní prohlížeče.

Proč používat prvek dialogu?

Primárním důvodem použití dialogového prvku je pohodlí. Usnadňuje vytváření dialogů, které se mohou zobrazovat buď vložené, nebo jako modální, s ničím jiným než s jedinou HTML značkou a několika řádky JavaScriptu.

instagram viewer

Prvek dialogového okna odstraňuje potřebu vytvářet a ladit vlastní dialogové okno nebo importovat komponentu někoho jiného. Je také velmi snadné stylovat pomocí CSS.

Podpora prohlížeče pro prvek Dialog

Bohužel podpora prohlížeče pro dialogový prvek by mohla být lepší. Je podporován v nejnovějších verzích všech hlavních prohlížečů od března 2022, s určitými výhradami.

Jakýkoli prohlížeč Firefox starší než Firefox 98 jej bude podporovat pouze v případě, že je ručně povolen v nastavení prohlížeče, a jakákoli verze Safari starší než Safari 15.4 jej nepodporuje vůbec. Úplné podrobnosti o podpoře prohlížeče jsou k dispozici na mohu použít.

Naštěstí to neznamená, že prvek dialogu je nepoužitelný. Tým Google Chrome udržuje polyfill, který můžete najít na Github pro prvek dialog, který pro něj poskytuje podporu i v prohlížečích, kde není nativně podporován.

Ve své současné podobě může mít prvek dialogu problémy s přístupností, takže může být vhodnější použít vlastní komponentu dialogu, jako je a11y-dialog ve výrobních aplikacích.

Jak používat prvek dialogu

Chcete-li předvést, jak používat prvek dialogového okna, použijete jej k vytvoření společné funkce webu: potvrzovací modal pro tlačítko smazání.

Vše, co je potřeba k následování, je jediný soubor HTML.

1. Nastavte soubor HTML

Začněte vytvořením uvedeného souboru a pojmenujte jej index.html.

Dále vytvořte strukturu souboru HTML a poskytněte některé základní metainformace o stránce, aby se správně vykreslovala na všech zařízeních.

Zadejte následující kód do index.html:

<!DOCTYPE html>
<html jazyk="en">
<hlava>
<meta znaková sada="UTF-8">
<meta http-equiv="X-UA-kompatibilní" obsah ="IE=hrana">
<meta jméno="výřez" obsah ="width=device-width, initial-scale=1.0">
<titul>Dialogové demo</title>
</head>
<styl></style>


<tělo></body>
<skript></script>
</html>

To je vše potřebné pro tento projekt.

2. Psaní značek

Dále napište označení pro tlačítko Odstranit a také prvek dialogu.

Do značky body souboru index.html zadejte následující kód:

<div třída="knoflíkový kontejner">
<knoflík>
Vymazat položka
</button>
</div>
<dialog>
<div>
 Jsi si jistý, že chceš vymazattento položka?
</div>
<div>
<třída tlačítka="zavřít">
 Ano
</button>
<třída tlačítka="zavřít">
 Ne
</button>
</div>
</dialog>

Výše uvedený HTML vytvoří:

  • Tlačítko smazat.
  • Prvek dialogu.
  • Dvě tlačítka uvnitř dialogu.

Pokud je ve vašem prohlížeči otevřen soubor index.html, jediným prvkem viditelným na obrazovce bude tlačítko smazat. To neznamená, že je něco špatně, prvek dialogu jednoduše vyžaduje trochu JavaScriptu, aby se zviditelnil.

3. Přidání JavaScriptu

Nyní napište kód, který otevře dialogové okno, když uživatel klikne na tlačítko Odstranit, a také kód, který umožní dialog zavřít.

Do značky skriptu index.html zadejte následující:

konst modální = dokument.querySelector("dialog")
document.querySelector(".button-container button").addEventListener("klikněte", () => {
modální.showModal();
});
konst closeBtns = dokument.getElementsByClassName("zavřít");
pro (btn z blízkýchBtns) {
 btn.addEventListener("klikněte", () => {
modální.zavřít();
 })
}

Tento kód používá metodu querySelector získat odkazy na tlačítka a dialog. Ke každému tlačítku pak připojí posluchač události kliknutí.

Možná jste obeznámeni s posluchače událostí v JavaScriptu, které můžete sami používat. Posluchač událostí připojený k tlačítku Odstranit zavolá metodu showModal(), aby se po kliknutí na tlačítko zobrazilo dialogové okno.

Každé tlačítko uvnitř modalu má připojený posluchač událostí, který používá metodu close() ke skrytí dialogu, když na ně kliknete.

I když v kódu není žádný JavaScript, který volá metodu close(), uživatelé mohou modal zavřít také stisknutím klávesy escape na klávesnici.

Nyní, když je tento JavaScript zaveden, pokud uživatel klepne na tlačítko smazat, modální se otevře a kliknutím na tlačítko ano nebo ne se modal zavře.

Takto by měl otevřený modal vypadat:

Jedna věc, kterou je třeba poznamenat, je, že prvek dialogu již přichází s určitým stylem, i když v index.html není žádný CSS. Modal je již vycentrován, má ohraničení, šířka je omezena na obsah a má nějakou výchozí výplň.

Uživatelé nemohou interagovat (klikat, vybírat) s ničím na pozadí, když je modal otevřený.

Dialogový prvek se také může zobrazit jako součást toku stránky namísto jako modální. Chcete-li to vyzkoušet, změňte první posluchač událostí v JavaScriptu takto:

document.querySelector(".button-container button").addEventListener("klikněte", () => { modal.show(); });

Jediná věc, která se v tomto kódu změnila, je, že kód volá metodu show() namísto metody showModal(). Nyní, když uživatel klikne na tlačítko smazat položku, modal by se měl otevřít takto:

4. Přidat styling

Dále upravte vzhled dialogu a jeho pozadí napsáním CSS.

CSS zmenší okraj dialogu, omezí jeho maximální šířku a poté ztmaví pozadí a také přidá trochu stylingu tlačítkům.

Stylování samotného dialogu je přímočaré, ale pseudo třída pozadí je nezbytná pro přidání stylů, které cílí na pozadí dialogu.

Vložte následující kód do značky stylu index.html:

dialog:: pozadí {
 pozadí: černé;
neprůhlednost: 0.5;
}
knoflík {
 border-radius: 2px;
 barva pozadí: bílá;
 ohraničení: 1px plná černá;
 okraj: 5px;
 box-shadow: 1px 1px 2px šedá;
}
dialog {
 max-šířka: 90vw;
 ohraničení: 1px plná černá;
}

Když je dialog otevřený, měl by nyní vypadat takto:

A vytvořili jste plně funkční dialog.

Dialogový prvek je skvělý způsob, jak vytvářet modály

Pomocí dialogového prvku HTML, který nedávno získal podporu ve všech hlavních prohlížečích, mohou nyní weboví vývojáři vytvářet plně funkční, snadno přizpůsobitelné modály a dialogy s jednou HTML značkou a několika řádky JavaScriptu a bez nutnosti spoléhat se na třetí stranu řešení.

Dialogový prvek má polyfill spravovaný týmem Google Chrome, což umožňuje vývojářům používat dialog ve verzích prohlížečů, které jej nepodporují.