Dialógy a modály sú neoddeliteľnou súčasťou väčšiny webových aplikácií. Aj keď ich ručné zostavovanie nie je zložitá úloha, je to úloha, ktorá sa rýchlo stáva únavnou pre každého webového vývojára. Obvyklou alternatívou k ich ručnému stavaniu je použitie komponentu, ktorý postavil niekto iný.

Tento prístup má však niekoľko problémov. Existuje toľko možností, že je ťažké vedieť, ktorý komponent by bolo najlepšie použiť a prispôsobenie vzhľadu takýchto komponentov môže byť niekedy rovnako únavné ako vytváranie dialógu ručne. Našťastie existuje aj iná alternatíva: dialógový prvok HTML.

Čo je prvok dialógu?

Prvok dialógového okna HTML je vstavaná značka HTML (napríklad div alebo span), ktorá umožňuje vývojárom vytvárať vlastné dialógy a modály. Dialógový prvok existuje v prehliadačoch Chrome a Opera od roku 2014, ale len nedávno ho začali podporovať všetky hlavné prehliadače.

Prečo používať prvok dialógu?

Hlavným dôvodom použitia dialógového prvku je pohodlie. Uľahčuje vytváranie dialógov, ktoré sa môžu zobraziť buď vložené, alebo ako modálne, s ničím iným ako s jednou značkou HTML a niekoľkými riadkami JavaScriptu.

instagram viewer

Prvok dialógového okna odstraňuje potrebu vytvárať a ladiť vlastné dialógové okno alebo importovať komponent niekoho iného. Je tiež veľmi jednoduché štýlovať pomocou CSS.

Podpora prehliadača pre prvok dialógu

Bohužiaľ, podpora prehliadača pre dialógový prvok by mohla byť lepšia. Od marca 2022 je podporovaný v najnovších verziách všetkých hlavných prehliadačov s určitými výhradami.

Akýkoľvek prehliadač Firefox starší ako Firefox 98 ho bude podporovať iba vtedy, ak je manuálne povolený v nastaveniach prehliadača, a akákoľvek verzia Safari staršia ako Safari 15.4 ho nepodporuje vôbec. Úplné podrobnosti o podpore prehliadača sú k dispozícii na môžem použiť.

Našťastie to neznamená, že prvok dialógu je nepoužiteľný. Tím Google Chrome spravuje polyfill, ktorý nájdete na Github pre prvok dialógu, ktorý ho podporuje aj v prehliadačoch, kde nie je natívne podporovaný.

V súčasnej podobe môže mať dialógový prvok problémy s prístupnosťou, takže môže byť vhodnejšie použiť vlastný dialógový komponent, napr a11y-dialóg vo výrobných aplikáciách.

Ako používať prvok dialógu

Ak chcete demonštrovať, ako používať prvok dialógového okna, použijete ho na vytvorenie spoločnej funkcie webovej lokality: potvrdzovacieho modu pre tlačidlo Odstrániť.

Všetko, čo musíte nasledovať, je jeden súbor HTML.

1. Nastavte súbor HTML

Začnite vytvorením uvedeného súboru a pomenujte ho index.html.

Ďalej vytvorte štruktúru súboru HTML a poskytnite základné metainformácie o stránke, aby sa správne vykreslila na všetkých zariadeniach.

Zadajte nasledujúci kód do index.html:

<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<meta znaková sada="UTF-8">
<meta http-ekviv="X-UA-kompatibilné" obsah ="IE=okraj">
<meta meno="výrez" obsah ="šírka=šírka zariadenia, počiatočná mierka=1,0">
<titul>Dialógové ukážky</title>
</head>
<štýl></style>


<telo></body>
<skript></script>
</html>

To je všetko potrebné nastavenie pre tento projekt.

2. Písanie značky

Ďalej napíšte označenie pre tlačidlo Odstrániť, ako aj prvok dialógu.

Zadajte nasledujúci kód do značky body index.html:

<trieda div="gombíkový kontajner">
<tlačidlo>
Odstrániť položka
</button>
</div>
<dialóg>
<div>
 Si si istý, že chceš vymazaťtoto položka?
</div>
<div>
<trieda tlačidiel="Zavrieť">
 Áno
</button>
<trieda tlačidiel="Zavrieť">
 nie
</button>
</div>
</dialog>

HTML vyššie vytvorí:

  • Tlačidlo na vymazanie.
  • Prvok dialógu.
  • Dve tlačidlá vo vnútri dialógového okna.

Ak je vo vašom prehliadači otvorený index.html, jediným viditeľným prvkom na obrazovke bude tlačidlo Odstrániť. To neznamená, že je niečo zlé, dialógový prvok jednoducho vyžaduje trochu JavaScriptu, aby bol viditeľný.

3. Pridanie JavaScriptu

Teraz napíšte kód, ktorý otvorí dialógové okno, keď používateľ klikne na tlačidlo Odstrániť, ako aj kód, ktorý umožní zatvorenie dialógového okna.

Do značky skriptu index.html zadajte nasledujúce:

konšt modálny = dokument.querySelector("dialóg")
document.querySelector(".tlačidlo-tlačidlo kontajnera").addEventListener("kliknite", () => {
modálny.showModal();
});
konšt closeBtns = dokument.getElementsByClassName("zavrieť");
for (btn of closeBtns) {
 btn.addEventListener("kliknite", () => {
modálny.Zavrieť();
 })
}

Tento kód používa metódu querySelector získať odkazy na tlačidlá a dialógové okno. Ku každému tlačidlu potom pripojí prijímač udalosti kliknutia.

Možno ste oboznámení s poslucháčov udalostí v JavaScripte, ktoré môžete sami použiť. Poslucháč udalostí pripojený k tlačidlu vymazať zavolá metódu showModal() na zobrazenie dialógového okna po kliknutí na tlačidlo.

Ku každému tlačidlu vo vnútri modálu je pripojený poslucháč udalostí, ktorý používa metódu close() na skrytie dialógového okna po kliknutí.

Aj keď v kóde nie je žiadny JavaScript, ktorý volá metódu close(), používatelia môžu modal zatvoriť aj stlačením klávesu escape na klávesnici.

Teraz, keď je tento JavaScript na svojom mieste, ak používateľ klikne na tlačidlo Odstrániť, otvorí sa modál a kliknutím na tlačidlo áno alebo nie sa modal zatvorí.

Takto by mal vyzerať otvorený modal:

Jedna vec, ktorú treba poznamenať, je, že prvok dialógového okna už prichádza s určitým štýlom, aj keď v index.html nie je žiadny CSS. Modál je už vycentrovaný, má orámovanie, šírka je obmedzená na obsah a má predvolenú výplň.

Používatelia nemôžu interagovať (klikať, vyberať) s ničím na pozadí, kým je modál otvorený.

Dialógový prvok sa môže zobraziť aj ako súčasť toku stránky namiesto ako modálny. Ak to chcete vyskúšať, zmeňte prvý prijímač udalostí v JavaScripte takto:

document.querySelector(".tlačidlo-tlačidlo kontajnera").addEventListener("kliknite", () => { modal.show(); });

Jediná vec, ktorá sa v tomto kóde zmenila, je, že kód volá metódu show() namiesto metódy showModal(). Teraz, keď používateľ klikne na tlačidlo odstránenia položky, modál by sa mal otvoriť v rade takto:

4. Pridajte štýl

Ďalej upravte vzhľad dialógového okna a jeho pozadie napísaním CSS.

CSS zmenší okraj dialógu, obmedzí jeho maximálnu šírku a následne stmaví pozadie, ako aj pridá tlačidlám trochu štýlu.

Štýl samotného dialógového okna je jednoduchý, ale pseudo trieda pozadia je potrebná na pridanie štýlu, ktorý sa zameriava na pozadie dialógového okna.

Prilepte nasledujúci kód do značky štýlu index.html:

dialóg:: pozadie {
 pozadie: čierne;
nepriehľadnosť: 0.5;
}
tlačidlo {
 border-radius: 2px;
 farba pozadia: biela;
 orámovanie: 1px plná čierna;
 okraj: 5px;
 box-shadow: 1px 1px 2px sivý;
}
dialóg {
 max-šírka: 90vw;
 orámovanie: 1px plná čierna;
}

Keď je dialógové okno otvorené, malo by teraz vyzerať takto:

A vytvorili ste plne funkčný dialóg.

Dialógový prvok je skvelý spôsob, ako zostaviť modály

Pomocou dialógového prvku HTML, ktorý nedávno získal podporu vo všetkých hlavných prehliadačoch, môžu teraz weboví vývojári vytvárať plne funkčné, ľahko prispôsobiteľné modály a dialógy s jednou HTML značkou a niekoľkými riadkami JavaScriptu a bez toho, aby ste sa museli spoliehať na tretiu stranu Riešenie.

Prvok dialógového okna má polyfill spravovaný tímom Google Chrome, čo umožňuje vývojárom používať dialógové okno vo verziách prehliadača, ktoré ho nepodporujú.