DSFR v1.14.0
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 data-fr-opened="false" aria-controls="modal-5748" id="modal-5748" type="button" class="fr-btn">Modale simple</button>
<dialog id="modal-5748" class="fr-modal" aria-labelledby="modal-5748-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 aria-controls="modal-5748" title="Fermer" type="button" id="button-5749" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<h2 id="modal-5748-title" class="fr-modal__title">
<span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button data-fr-opened="false" aria-controls="modal-5753" id="modal-5753" type="button" class="fr-btn">Modale SM</button>
<dialog id="modal-5753" class="fr-modal" aria-labelledby="modal-5753-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 aria-controls="modal-5753" title="Fermer" type="button" id="button-5754" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<h2 id="modal-5753-title" class="fr-modal__title">
<span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button data-fr-opened="false" aria-controls="modal-5758" id="modal-5758" type="button" class="fr-btn">Modale LG</button>
<dialog id="modal-5758" class="fr-modal" aria-labelledby="modal-5758-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 aria-controls="modal-5758" title="Fermer" type="button" id="button-5759" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<h2 id="modal-5758-title" class="fr-modal__title">
<span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button data-fr-opened="false" aria-controls="modal-5763" id="modal-5763" type="button" class="fr-btn">Modale formulaire</button>
<dialog id="modal-5763" class="fr-modal" aria-labelledby="modal-5763-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 aria-controls="modal-5763" title="Fermer" type="button" id="button-5764" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<h2 id="modal-5763-title" class="fr-modal__title">
<span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h2>
<form action="">
<fieldset class="fr-fieldset" id="input-sample" aria-labelledby="input-sample-legend input-sample-messages">
<legend class="fr-fieldset__legend" id="input-sample-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-5736">
<label class="fr-label" for="input-sample-1">
Libellé champ de saisie
</label>
<input class="fr-input" aria-describedby="input-sample-1-messages" name="input-sample-1" id="input-sample-1" type="text">
<div class="fr-messages-group" id="input-sample-1-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-5737">
<label class="fr-label" for="input-sample-2">
Libellé champ de saisie
</label>
<input class="fr-input" aria-describedby="input-sample-2-messages" name="input-sample-2" id="input-sample-2" type="text">
<div class="fr-messages-group" id="input-sample-2-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-5738">
<label class="fr-label" for="input-sample-3">
Libellé champ de saisie
</label>
<input class="fr-input" aria-describedby="input-sample-3-messages" name="input-sample-3" id="input-sample-3" type="text">
<div class="fr-messages-group" id="input-sample-3-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="input-sample-messages" aria-live="polite">
</div>
</fieldset>
<button title="Envoyer" type="submit" class="fr-btn">Libellé bouton</button>
</form>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button data-fr-opened="false" aria-controls="modal-5768" id="modal-5768" type="button" class="fr-btn">Modale iframe</button>
<dialog id="modal-5768" class="fr-modal" aria-labelledby="modal-5768-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 aria-controls="modal-5768" title="Fermer" type="button" id="button-5769" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<h2 id="modal-5768-title" class="fr-modal__title">
<span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<iframe title="Titre de l'iframe" class="fr-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button data-fr-opened="false" aria-controls="modal-5773" id="modal-5773" type="button" class="fr-btn">Modale avec zone d'action</button>
<dialog id="modal-5773" class="fr-modal" aria-labelledby="modal-5773-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 aria-controls="modal-5773" title="Fermer" type="button" id="button-5774" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<h2 id="modal-5773-title" class="fr-modal__title">
<span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
</div>
<div class="fr-modal__footer">
<div class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
<button type="button" id="button-5739" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">Libellé bouton</button>
<button type="button" id="button-5740" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button data-fr-opened="false" aria-controls="modal-5778" id="modal-5778" type="button" class="fr-btn">Modale ancrée en haut</button>
<dialog id="modal-5778" class="fr-modal fr-modal--top" aria-labelledby="modal-5778-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 aria-controls="modal-5778" title="Fermer" type="button" id="button-5779" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<h2 id="modal-5778-title" class="fr-modal__title">
<span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
</div>
<div class="fr-modal__footer">
<div class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
<button type="button" id="button-5739" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">Libellé bouton</button>
<button type="button" id="button-5740" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button data-fr-opened="false" aria-controls="modal-5783" id="modal-5783" type="button" class="fr-btn">Modale tableau et tooltip</button>
<dialog id="modal-5783" class="fr-modal" aria-labelledby="modal-5783-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 aria-controls="modal-5783" title="Fermer" type="button" id="button-5784" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<h2 id="modal-5783-title" class="fr-modal__title">
<span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h2>
<div class="fr-table" id="modal-table-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="modal-table">
<thead>
<tr>
<th scope="col">
th0
</th>
<th scope="col">
th1
</th>
</tr>
</thead>
<tbody>
<tr id="modal-table-row-key-1" data-row-key="1">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-2" data-row-key="2">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
<a aria-describedby="tooltip-5741" id="link-5742" href="#" class="fr-link">Exemple</a>
<span class="fr-tooltip fr-placement" id="tooltip-5741" role="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</span>
</td>
</tr>
<tr id="modal-table-row-key-3" data-row-key="3">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-4" data-row-key="4">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-5" data-row-key="5">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
<button aria-describedby="tooltip-5743" type="button" class="fr-btn--tooltip fr-btn">Information contextuelle</button>
<span class="fr-tooltip fr-placement" id="tooltip-5743" role="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</span>
</td>
</tr>
<tr id="modal-table-row-key-6" data-row-key="6">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-7" data-row-key="7">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-8" data-row-key="8">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-9" data-row-key="9">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-10" data-row-key="10">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-11" data-row-key="11">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-12" data-row-key="12">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-13" data-row-key="13">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-14" data-row-key="14">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-15" data-row-key="15">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
<tr id="modal-table-row-key-16" data-row-key="16">
<td>
Lorem ipsum dolor sit ame
</td>
<td>
Lorem ipsum dolor sit ame
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="fr-modal__footer">
<div class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
<button type="button" id="button-5744" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">Libellé bouton</button>
<button type="button" id="button-5745" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button data-fr-opened="false" aria-controls="modal-5788" id="modal-5788" type="button" class="fr-btn">Modale avec titre en p</button>
<dialog id="modal-5788" class="fr-modal" aria-labelledby="modal-5788-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 aria-controls="modal-5788" title="Fermer" type="button" id="button-5789" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<p id="modal-5788-title" class="fr-modal__title">
<span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
Titre de la modale
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button data-fr-opened="false" aria-controls="modal-5793" id="modal-5793" type="button" class="fr-btn">Modale simple</button>
<dialog id="modal-5793" class="fr-modal" aria-labelledby="modal-5793-title" data-fr-concealing-backdrop="false">
<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 aria-controls="modal-5793" title="Fermer" type="button" id="button-5794" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<h2 id="modal-5793-title" class="fr-modal__title">
<span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button onClick="window.dsfr(this.nextElementSibling).modal.disclose()" type="button" class="fr-btn">Modale simple</button>
<dialog id="modal-5798" class="fr-modal" aria-labelledby="modal-5798-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 aria-controls="modal-5798" title="Fermer" type="button" id="button-5799" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<h2 id="modal-5798-title" class="fr-modal__title">
<span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
</div>
</div>
</div>
</div>
</div>
</dialog>