---
boost: 0
sitemap:
  noindex: true
title: Démonstration de la modale
shortTitle: Démonstration de la Modale
description: Illustration du fonctionnement à travers différents cas d’usage et exemples interactifs du composant Modale.
shortDescription: Affichage focalisé d’un contenu secondaire
keywords: modale, modal, fenêtre, focus, interaction, DSFR, accessibilité, interface, contenu secondaire
cover: ../_asset/cover/cover.png
excerpt: Le composant Modale permet d’afficher un contenu ou une interaction dans une fenêtre superposée à la page, bloquant le fond et recentrant l’attention de l’usager.
summary: La modale s’utilise pour présenter un contenu complémentaire ou une action simple sans sortir de la page en cours. Elle est conçue pour isoler une information importante tout en permettant de revenir au contexte initial en un clic. Non personnalisable, elle existe en plusieurs tailles, avec ou sans zone d’action, et respecte les standards d’accessibilité en figeant l’arrière-plan lors de son affichage.
mesh:
  - component/button
  - component/display
---

## Modale

La modale est un élément de mise en forme de contenu permettant de concentrer l’attention de l’usager exclusivement sur une tâche ou un élément d’information, sans perdre le contexte de la page en cours.

:::dsfr-doc-tab-navigation

- [Présentation](../index.md)
- Démo
- [Design](../design/index.md)
- [Code](../code/index.md)
- [Accessibilité](../accessibility/index.md)

:::

::dsfr-doc-storybook{storyId=modal--docs}