Pohled na dialogové prvky superschopnosti

Kdysi dávno, v roce 2014, dialog prvek přistál v Chromiu 37 . Myšlenkou elementu HTML bylo usnadnit vytváření modálů, dialogů a vyskakovacích oken.

Specifikace definuje prvek takto:

Nyní máme rok 2022 a téměř jsme se dostali k použití dialog živel! 🎉 V březnu počínaje Safari 15.4 (poznámky k vydání Safari) a Firefox 98 (poznámky k vydání Firefoxu), oba chybějící prohlížeče dodávají prvek, který je součástí Chromia již od věků.

Tento pokrok nás přivádí k dialog podporovanému napříč prohlížeči prvek ve všech stálezelených prohlížečích již brzy!

MDN Compat Data (zdroj)
Informace o podpoře prohlížeče pro prvek Dialog
37 37 79 98 Ne 15.4 15.4 3.0 37

Firefox a Safari dodává tento prvek vynikající pro přístupnost, protože vytvoření přístupného modalu bylo vždy komplikované. Přečtěte si článek Scotta O'Hary „Mít otevřený dialog“, kde se dozvíte více o modální dostupnosti.

Hrál jsem si s tímto novým způsobem vytváření dialogů a zjistil jsem, že HTMLDialogElement nejenže rozlišuje mezi nemodálními a modálními dialogy, ale přichází také s modálními funkcemi, které je těžké najít správně.

Pojďme se podívat na dialog superschopnosti!

Základy dialog prvek

Chcete-li začít, vložte prvek na své stránky a zjistěte, že ...

Hřiště

Ahoj světe

" style="display:grid">
<dialog>
  <h1>
    Hello world
  </h1>
</dialog>
Náhled

... nic neuvidíte. Podporované prohlížeče zahrnují ve svých stylech user-agent následující CSS.

dialog:not([open]) {
  display: none;
}

dialog prvek je ve výchozím nastavení skrytý a jeho viditelnost závisí na přítomnosti open atribut. Pojďme to přidat do HTML!

Hřiště

Ahoj světe

" css="body { height:10em;}" style="display:grid">
<dialog open>
  <h1>
    Hello world
  </h1>
</dialog>
body {
 height: 10em;
}
Náhled

A tady to máme – viditelný prvek dialogu!

Obvykle byste dialogy otevírali pomocí JavaScriptu, ale pokud stránky vykreslujete na serveru po odeslání formuláře, definice v HTML může mít smysl pro zobrazení modálu po načtení stránky.

Nyní si můžete pohrát s open atribut přes JavaScript pro zobrazení dialogu, ale vydržte! Prvek poskytuje dvě další metody pro dynamické interakce.

show() – absolutně umístěný dialog se správným ovládáním zaostření

Chcete-li zobrazit dialog jako nemodální, přejděte na dialog prvek z DOM a zavolejte jeho show metoda.

const dialog = document.querySelector('dialog');
dialog.show();

// to close the dialog use `close`
dialog.close();

Podívejte se na to v akci níže.

Hřiště

dialog.show() otevře nemodální dialog o absolutní poloze.

Ahoj světe z dialogu

I když tato funkce vypadá jako jednoduché přepínání zobrazení prvků, děje se více věcí. 🎉

show metoda přidá open atribut k prvku dialogu, prvek je absolutně umístěn podle stylů user-agent a automaticky se zaostří tlačítko pro zavírání.

Na mém webu nevidíte stavy fokusu spouštěné myší, protože používá :focus-visible . Pokud chcete vidět obrysy fokusu, zaostřete a stiskněte na klávesnici tlačítko "Otevřít dialog".

Prohlížeče však nepřesouvají zaměření na modal pouze při jeho otevření. Pokud modal zavřete pomocí dialog.close(), fokus se přesune zpět na dříve zaměřený prvek , také. To je docela praktické a velmi cenné pro usnadnění přístupu a použitelnost klávesnice.

Pokud se chcete dozvědět více o logice ostření dialogu, zkontrolujte specifikaci. Ale pozor:tato část specifikace není snadno pochopitelná a probíhají také diskuse o změně popsaného chování zaměření.

Tyto funkce jsou cenné pro vytváření nemodálních vyskakovacích oken, ale co tradiční mody pokrývající celou stránku? Jak vytvoříte modální překrytí stránky a jak byste mohli zabránit uživatelům v klikání na tlačítka nebo odkazy mimo otevřené dialogové okno?

showModal poskytuje všechny tyto funkce!

showModal() – pevně umístěný dialog s některými superschopnostmi

Chcete-li vytvořit modální dialog pokrývající veškerý další obsah stránky, použijte showModal metoda.

const dialog = document.querySelector('dialog');
dialog.showModal();

// to close the dialog use `close`
dialog.close();

Prohlédněte si jej v akci kliknutím na tlačítko níže.

Hřiště

dialog.showModal() otevře pevně umístěný modální dialog, lze jej zavřít stisknutím ESC a všechny ostatní prvky se stanou nepřístupnými.

Ahoj světe z dialogu

showModal metoda se v mnoha ohledech liší od show .

Modální dialog je position: fixed

Pokud modal zkontrolujete, uvidíte, že Safari a Chromium poskytují styl prostřednictvím dialog:-internal-modal nebo dialog:-internal-modal-dialog .

Dialogový prvek je nyní pevně umístěn a pokrývá vše, co bylo vykresleno na obrazovce.

Modální dialogové okno obsahuje ::backdrop pseudoprvek

Dialogový prvek navíc obsahuje ::backdrop překryvný pseudoelement, když je otevřen pomocí showModal .

/* Included in the Chrome user agent styles */
dialog::backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.1);
}

Chromium ani Safari bohužel nezobrazují ::backdrop pseudoprvek v panelu prvků.

Jak zavřít modal na ::backdrop klikněte

Chybí věc číslo jedna, na kterou lidé poukazují, je to, že se dialog automaticky nezavře po kliknutí na pozadí. Tvrdil bych, že by bylo cenné začlenit tuto funkci do specifikace, ale jsem si jistý, že existuje dobrý důvod, proč to neudělat.

Naštěstí to můžete obejít přidáním obsluhy kliknutí do dialog a pomocí bublinkové povahy událostí kliknutí.

dialog.addEventListener('click', (event) => {
  if (event.target.nodeName === 'DIALOG') {
    dialog.close();
  }
});

Klikněte na bublinu událostí ve stromu DOM. Pokud existuje button uvnitř div uvnitř html K prvku html můžete připojit obslužný program kliknutí prvek a reagovat na kliknutí na tlačítko.

Adam sdílel, že můžete využít toto chování události a zavřít dialogové okno, když někdo klikne na překryvnou kulisu. Pokud někdo klikne na prvky uvnitř prvku dialogu, jako jsou tlačítka nebo formulář, event.target.nodeName bude název konkrétního uzlu (BUTTON nebo FORM ). Pokud však někdo klikne na překryvnou vrstvu, bude to DIALOG protože pseudoprvek patří do dialog .

Podívejte se na malý šikovný trik v akci níže.

Hřiště

dialog.showModal() otevře pevně umístěný modální dialog, lze jej zavřít stisknutím ESC a všechny ostatní prvky se stanou nepřístupnými.

Ahoj světe z dialogu

Ale je tu více efektních věcí!

Modální dialog lze zavřít pomocí ESC

Nelze říci nic jiného, ​​než že není potřeba všude přidávat obslužné programy pro události stisknutí klávesy. 🎉 Také, pokud se dialog zavře stisknutím ESC , cancel událost je spuštěna.

Modální dialog znepřístupňuje vše ostatní

Pokud otevřete modální dialog, nemůžete již klikat na další prvky, a to nejen proto, že je zakrývá pozadí. Pokud stisknete TAB klíč, také zjistíte, že všechny ostatní interaktivní prvky jsou nepřístupné.

Je to pouze prvek otevřeného dialogu, se kterým můžete pracovat!

inert element teoreticky poskytuje způsoby, jak učinit prvky nepřístupnými, ale nezdá se, že by došlo k nějakému pohybu prohlížeče, který by tento atribut v dohledné době implementoval.

dialog – vítaný doplněk webové platformy

Rád vidím, že na webovou platformu vstupuje více typických případů použití uživatelského rozhraní. A dialog prvek je více než vítaný, protože vytváření přístupných modalů je mnohem víc než přepínání display Vlastnost CSS. Čím více funkcí prohlížeče poskytují, tím lépe pro všechny.

dialog prvek je také zahrnut do iniciativy Interop 2022, ve které dodavatelé prohlížečů spolupracují, aby vývojářům usnadnili tvorbu webu.

Je osvěžující vidět v poslední době veškerý pohyb prohlížeče. Nemůžu se dočkat, až uvidím, co bude dál!

Další čtení

Zde jsou další zdroje, pokud se chcete dozvědět více o dialog prvek.

  • HTMLDialogElement na MDN
  • Představení prvku Dialog
  • Nahradit dialogová okna JavaScript novým prvkem dialogu HTML