Deux constructeurs offerts dans le HTML : <dialog> pour les décisions bloquantes et l'attribut popover pour les toggles légers. Tous deux s'affichent dans le top layer du navigateur (au-dessus de n'importe quel z-index), se ferment à Escape et gèrent le focus.
<dialog id="confirm">
<p>Delete this page for good?</p>
<button id="yes">Confirm</button>
<button id="no">Cancel</button>
</dialog>
<button popovertarget="picker">Pick</button>
<div id="picker" popover>...</div>Ce que vous supprimez en les adoptant
- Code de piège de focus : showModal() intercepte le focus lorsqu'il est ouvert et le restaure lorsqu'il est fermé.
- Câblage d'évasion et de fond : les événements d'annulation/fermeture arrivent déjà câblés.
- La course aux armements z-index et son wrapper divs: ::backdrop est un sélecteur, pas un élément.
Lequel choisir
- Une décision que le lecteur doit trancher avant tout : <dialog>.showModal().
- Un champ qui ouvre un petit panneau : popover. Il est non modal par conception.
- Les deux : testez d’abord avec le clavier, puis avec un lecteur d’écran ; le travail de la plateforme couvre la plupart des cas extrêmes, mais pas tous.
Un balisage de bug ne peut pas résoudre pour vous : les données non enregistrées derrière le modal. Enregistrez automatiquement avant d'ouvrir la boîte de dialogue, car la fermeture peut se produire de plus de manières que prévu par votre code. C'est le seul état qu'un modal roulé à la main obtient habituellement et que celui-ci oublie.