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

L'élément de boîte de dialogue derrière un indicateur est désormais compatible avec Chrome Canary. L'élément dialog peut être utilisé pour les pop-ups sur une page Web.

  • show(): ouvrir une boîte de dialogue.
  • close(): fermer la boîte de dialogue. Prend un argument facultatif sur lequel, s'il est présent, dialog.returnValue est défini.
  • showModal(): ouvrir la boîte de dialogue modale
  • ::backdrop: pseudo-élément pour appliquer un style à l'arrière-plan derrière 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 comportant l'attribut autofocus, le cas échéant, sera sélectionnée lorsque la boîte de dialogue s'affichera. En l'absence d'élément de ce type, le premier est sélectionné.
  • form[method="dialog"]: valide uniquement dans une boîte de dialogue. Lors de l'envoi du formulaire, il ferme la boîte de dialogue et définit dialog.returnValue sur la valeur du bouton d'envoi utilisé.

Consultez les détails à l'aide d'une démonstration en direct et d'un polyfill.

Pour ce faire, activez l'option "Activer les fonctionnalités expérimentales de la plate-forme Web" sur la page chrome://flags/.