Élément de boîte de dialogue - Fenêtres modales simplifiées

Eiji Kitamura

Twitter GitHub Glitch Mastodon

Chrome Canary est désormais compatible avec l'élément de boîte de dialogue situé derrière un indicateur. Vous pouvez utiliser l'élément dialog pour les pop-ups sur une page Web.

• show(): ouvrir une boîte de dialogue.
• close(): fermer la boîte de dialogue. Utilise un argument facultatif qui, s'il est présent, est défini sur dialog.returnValue.
• showModal(): ouvrir une boîte de dialogue modale.
• ::backdrop: pseudo-élément permettant d'appliquer un style à l'arrière-plan d'une boîte de dialogue modale.
• Événement close: déclenché lorsqu'une boîte de dialogue est fermée.

Mise à jour du 16 décembre 2013

L'élément dialog accepte désormais les éléments suivants:

• Événement cancel: déclenché lorsque l'utilisateur appuie sur la touche Échap dans une boîte de dialogue modale. Cet événement peut être annulé avec event.preventDefault().
• Attribut autofocus: la première commande de formulaire d'une boîte de dialogue modale qui contient l'attribut autofocus, le cas échéant, sera sélectionnée lorsque la boîte de dialogue s'affiche. En l'absence d'un tel élément, le premier élément sélectionnable est sélectionné.
• form[method="dialog"]: valide uniquement dans une boîte de dialogue. Une fois le formulaire envoyé, la boîte de dialogue se ferme et la valeur dialog.returnValue est définie sur la valeur du bouton d'envoi utilisé.

Découvrez-en plus avec une démonstration en direct et un polyfill.

Activez l'option "Activer les fonctionnalités expérimentales de la plate-forme Web" dans chrome://flags/.