Interface Noyau A1 · Norme officielle

Modal Dialog

Boîte de dialogue modale

Une boîte de dialogue modale est une fenêtre ciblée. Elle bloque l'écran actuel jusqu'à ce que quelqu'un la ferme ou la termine.

Essayez un exemple
Vous pourriez l'appeler Modal Dialogmodaldialoguefenêtre pop-up

Essayez un exemple

Aperçu

Boîte de dialogue modale

Une boîte de dialogue modale est une fenêtre ciblée. Elle bloque l'écran actuel jusqu'à ce que quelqu'un la ferme ou la termine.

Le contenu de l’arrière-plan est inerte jusqu’à la fermeture de cette boîte de dialogue.
EnregistréAperçu
Boîte de dialogue modalemodal-dialog

Un vrai exemple

Pour la suppression de compte, le focus du clavier reste à l'intérieur de la boîte de dialogue. Si la personne annule, le focus revient sur le bouton qui l'a ouverte.

Parties principales

  1. 01Déclencheur
  2. 02Anchored or modal surface
  3. 03Focus boundary
  4. 04Dismiss path

Utilisez-le lorsque

Utilisez-le pour un choix court ou une petite tâche qui doit recevoir toute l'attention.

Ne l'utilisez pas lorsque

N'ouvrez jamais une boîte de dialogue par-dessus une autre et n'utilisez pas une boîte de dialogue pour des informations normales ou à faible risque.

Nom utilisé dans le code

<dialog> / role="dialog" aria-modal="true"

Avant d'expédier

Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states.

Demande que vous pouvez copier

Outcome: Complete the task with Boîte de dialogue modale (Modal Dialog). User context: Pour la suppression de compte, le focus du clavier reste à l'intérieur de la boîte de dialogue. Si la personne annule, le focus revient sur le bouton qui l'a ouverte. Recommended pattern: Boîte de dialogue modale (Modal Dialog). Why it fits: Utilisez-le pour un choix court ou une petite tâche qui doit recevoir toute l'attention. Do not use it when: N'ouvrez jamais une boîte de dialogue par-dessus une autre et n'utilisez pas une boîte de dialogue pour des informations normales ou à faible risque. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): La norme couvre uniquement le champ d'application énuméré. Elle ne choisit ni le style visuel, ni la décision de produit, ni l'exemple de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.

Vérifiez cette demande

Review how Boîte de dialogue modale (Modal Dialog) is used now. Definition: Une boîte de dialogue modale est une fenêtre ciblée. Elle bloque l'écran actuel jusqu'à ce que quelqu'un la ferme ou la termine. Release checks: Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.

A1
Ce terme est-il officiel ?

Norme officielle

Une norme officielle définit les règles décrites sur cette page.

La norme couvre uniquement le champ d'application énuméré. Elle ne choisit ni le style visuel, ni la décision de produit, ni l'exemple de Vibulary.

Portée
Seulement ce que couvre la source:nom canonique、définition、sémantique、mise en œuvre、interaction、comportement du clavier、accessibilité
Statut du document
norme de vie
Coché activé
2026-07-30

Sources et portée des preuves

Source faisant autorité + Référence de terme · WHATWG · norme de vie HTML Living Standard — The dialog element The dialog element Portée: nom canonique、définition、sémantique、mise en œuvre Rôle ici: Référence directe au terme La source couvre: nom canonique, définition, sémantique, mise en œuvre Source faisant autorité · WHATWG · norme de vie HTML Living Standard Portée: nom canonique、définition、sémantique、mise en œuvre Rôle ici: Autorité dans le cadre indiqué La source couvre: nom canonique, définition, sémantique, mise en œuvre Source faisant autorité · W3C · recommandation Accessible Rich Internet Applications (WAI-ARIA) 1.2 Portée: nom canonique、définition、sémantique、mise en œuvre Rôle ici: Autorité dans le cadre indiqué La source couvre: nom canonique, définition, sémantique, mise en œuvre Source faisant autorité · W3C WAI · stable ARIA Authoring Practices Guide Portée: nom canonique、définition、interaction、comportement du clavier、accessibilité Rôle ici: Autorité dans le cadre indiqué La source couvre: nom canonique, définition, interaction, comportement du clavier, accessibilité

Copiez-le vous-même

Le navigateur n'a pas pu copier ceci. Sélectionnez la requête ci-dessous et copiez-la vous-même.