La modale permet de concentrer l’attention de l’utilisateur exclusivement sur une tâche ou un élément d’information, sans perdre le contexte de la page en cours. Ce composant nécessite une action de l’utilisateur afin d'être clôturé ou ouverte.
Documentation<button class="fr-btn" data-fr-opened="false" aria-controls="modal-768" id="modal-768" title="Modal simple">
Modal simple
</button>
<dialog id="modal-768" class="fr-modal" role="dialog" aria-labelledby="modal-768-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-link--close fr-link" aria-controls="modal-768">Fermer</button>
</div>
<div class="fr-modal__content">
<h1 id="modal-768-title" class="fr-modal__title">
<span class="fr-fi-arrow-right-line fr-fi--lg"></span>
Titre de la modale
</h1>
<p>Lorem [...] elit ut.</p>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button class="fr-btn" data-fr-opened="false" aria-controls="modal-771" id="modal-771" title="Modal SM">
Modal SM
</button>
<dialog id="modal-771" class="fr-modal" role="dialog" aria-labelledby="modal-771-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-link--close fr-link" aria-controls="modal-771">Fermer</button>
</div>
<div class="fr-modal__content">
<h1 id="modal-771-title" class="fr-modal__title">
<span class="fr-fi-arrow-right-line fr-fi--lg"></span>
Titre de la modale
</h1>
<p>Lorem [...] elit ut.</p>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button class="fr-btn" data-fr-opened="false" aria-controls="modal-774" id="modal-774" title="Modal LG">
Modal LG
</button>
<dialog id="modal-774" class="fr-modal" role="dialog" aria-labelledby="modal-774-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-link--close fr-link" aria-controls="modal-774">Fermer</button>
</div>
<div class="fr-modal__content">
<h1 id="modal-774-title" class="fr-modal__title">
<span class="fr-fi-arrow-right-line fr-fi--lg"></span>
Titre de la modale
</h1>
<p>Lorem [...] elit ut.</p>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button class="fr-btn" data-fr-opened="false" aria-controls="modal-777" id="modal-777" title="Modal formulaire">
Modal formulaire
</button>
<dialog id="modal-777" class="fr-modal" role="dialog" aria-labelledby="modal-777-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-link--close fr-link" aria-controls="modal-777">Fermer</button>
</div>
<div class="fr-modal__content">
<h1 id="modal-777-title" class="fr-modal__title">
<span class="fr-fi-arrow-right-line fr-fi--lg"></span>
Titre de la modale
</h1>
<form action="">
<div class="fr-form-group">
<fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend" id='text-legend'>
Légende pour l’ensemble de champs
</legend>
<div class="fr-fieldset__content">
<div class="fr-input-group">
<label class="fr-label" for="text-1">Label champs de saisie
</label>
<input class="fr-input" type="text" id="text-1" name="text-1">
</div>
<div class="fr-input-group">
<label class="fr-label" for="text-2">Label champs de saisie
</label>
<input class="fr-input" type="text" id="text-2" name="text-2">
</div>
<div class="fr-input-group">
<label class="fr-label" for="text-3">Label champs de saisie
</label>
<input class="fr-input" type="text" id="text-3" name="text-3">
</div>
</div>
</fieldset>
</div>
<button class="fr-btn" id="modal-777" title="Modal formulaire">
Modal formulaire
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button class="fr-btn" data-fr-opened="false" aria-controls="modal-780" id="modal-780" title="Modale avec zone d'action">
Modale avec zone d'action
</button>
<dialog id="modal-780" class="fr-modal" role="dialog" aria-labelledby="modal-780-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-link--close fr-link" aria-controls="modal-780">Fermer</button>
</div>
<div class="fr-modal__content">
<h1 id="modal-780-title" class="fr-modal__title">
<span class="fr-fi-arrow-right-line fr-fi--lg"></span>
Titre de la modale
</h1>
<p>Lorem [...] elit ut.</p>
</div>
<div class="fr-modal__footer">
<ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
<li>
<button class="fr-btn fr-fi-checkbox-circle-line" id="modal-780" title="Label bouton">
Label bouton
</button>
</li>
<li>
<button class="fr-btn fr-fi-checkbox-circle-line fr-btn fr-fi-checkbox-circle-line fr-btn--secondary" id="modal-780" title="Label bouton">
Label bouton
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button class="fr-btn" data-fr-opened="false" aria-controls="modal-783" id="modal-783" title="Modale ancrée en haut">
Modale ancrée en haut
</button>
<dialog id="modal-783" class="fr-modal fr-modal--top" role="dialog" aria-labelledby="modal-783-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-link--close fr-link" aria-controls="modal-783">Fermer</button>
</div>
<div class="fr-modal__content">
<h1 id="modal-783-title" class="fr-modal__title">
<span class="fr-fi-arrow-right-line fr-fi--lg"></span>
Titre de la modale
</h1>
<p>Lorem [...] elit ut.</p>
</div>
<div class="fr-modal__footer">
<ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
<li>
<button class="fr-btn fr-fi-checkbox-circle-line" id="modal-783" title="Label bouton">
Label bouton
</button>
</li>
<li>
<button class="fr-btn fr-fi-checkbox-circle-line fr-btn fr-fi-checkbox-circle-line fr-btn--secondary" id="modal-783" title="Label bouton">
Label bouton
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</dialog>