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="village-btn" data-village-opened="false" aria-controls="modal-6222" id="button-6223">
Modal simple
</button>
<dialog id="modal-6222" class="village-modal" aria-labelledby="modal-6222-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-8 village-col-lg-6">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="modal-6222" id="button-6224" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="modal-6222-title" class="village-modal__title">
<span class="village-icon-arrow-right-line village-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h1>
<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 class="village-btn" data-village-opened="false" aria-controls="modal-6229" id="button-6230">
Modal SM
</button>
<dialog id="modal-6229" class="village-modal" aria-labelledby="modal-6229-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-6 village-col-lg-4">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="modal-6229" id="button-6231" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="modal-6229-title" class="village-modal__title">
<span class="village-icon-arrow-right-line village-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h1>
<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 class="village-btn" data-village-opened="false" aria-controls="modal-6236" id="button-6237">
Modal LG
</button>
<dialog id="modal-6236" class="village-modal" aria-labelledby="modal-6236-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-10 village-col-lg-8">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="modal-6236" id="button-6238" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="modal-6236-title" class="village-modal__title">
<span class="village-icon-arrow-right-line village-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h1>
<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 class="village-btn" data-village-opened="false" aria-controls="modal-6243" id="button-6244">
Modal formulaire
</button>
<dialog id="modal-6243" class="village-modal" aria-labelledby="modal-6243-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-8 village-col-lg-6">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="modal-6243" id="button-6245" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="modal-6243-title" class="village-modal__title">
<span class="village-icon-arrow-right-line village-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h1>
<form action="">
<fieldset class="village-fieldset" aria-labelledby="undefined-legend undefined-messages">
<legend class="village-fieldset__legend" id="undefined-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="village-fieldset__element">
<div class="village-input-group" id="input-group-6213">
<label class="village-label" for="undefined-1">
Libellé champ de saisie
</label>
<input class="village-input" aria-describedby="undefined-1-messages" name="undefined" id="undefined-1" type="text">
<div class="village-messages-group" id="undefined-1-messages" aria-live="polite">
</div>
</div>
</div>
<div class="village-fieldset__element">
<div class="village-input-group" id="input-group-6214">
<label class="village-label" for="undefined-2">
Libellé champ de saisie
</label>
<input class="village-input" aria-describedby="undefined-2-messages" name="undefined" id="undefined-2" type="text">
<div class="village-messages-group" id="undefined-2-messages" aria-live="polite">
</div>
</div>
</div>
<div class="village-fieldset__element">
<div class="village-input-group" id="input-group-6215">
<label class="village-label" for="undefined-3">
Libellé champ de saisie
</label>
<input class="village-input" aria-describedby="undefined-3-messages" name="undefined" id="undefined-3" type="text">
<div class="village-messages-group" id="undefined-3-messages" aria-live="polite">
</div>
</div>
</div>
<div class="village-messages-group" id="undefined-messages" aria-live="polite">
</div>
</fieldset>
<button class="village-btn" id="button-6216" title="Envoyer">
Label bouton
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button class="village-btn" data-village-opened="false" aria-controls="modal-6250" id="button-6251">
Modal iframe
</button>
<dialog id="modal-6250" class="village-modal" aria-labelledby="modal-6250-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-8 village-col-lg-6">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="modal-6250" id="button-6252" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="modal-6250-title" class="village-modal__title">
<span class="village-icon-arrow-right-line village-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h1>
<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="village-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 class="village-btn" data-village-opened="false" aria-controls="modal-6257" id="button-6258">
Modale avec zone d'action
</button>
<dialog id="modal-6257" class="village-modal" aria-labelledby="modal-6257-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-8 village-col-lg-6">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="modal-6257" id="button-6259" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="modal-6257-title" class="village-modal__title">
<span class="village-icon-arrow-right-line village-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h1>
<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="village-modal__footer">
<div class="village-btns-group village-btns-group--right village-btns-group--inline-reverse village-btns-group--inline-lg village-btns-group--icon-left">
<button class="village-btn village-icon-checkbox-circle-line village-btn--icon-left" id="button-6217">
Label bouton
</button>
<button class="village-btn village-icon-checkbox-circle-line village-btn--icon-left village-btn--secondary" id="button-6218">
Label bouton
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button class="village-btn" data-village-opened="false" aria-controls="modal-6264" id="button-6265">
Modale ancrée en haut
</button>
<dialog id="modal-6264" class="village-modal village-modal--top" aria-labelledby="modal-6264-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-8 village-col-lg-6">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="modal-6264" id="button-6266" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="modal-6264-title" class="village-modal__title">
<span class="village-icon-arrow-right-line village-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h1>
<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="village-modal__footer">
<div class="village-btns-group village-btns-group--right village-btns-group--inline-reverse village-btns-group--inline-lg village-btns-group--icon-left">
<button class="village-btn village-icon-checkbox-circle-line village-btn--icon-left" id="button-6217">
Label bouton
</button>
<button class="village-btn village-icon-checkbox-circle-line village-btn--icon-left village-btn--secondary" id="button-6218">
Label bouton
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
<button class="village-btn" data-village-opened="false" aria-controls="modal-6271" id="button-6272">
Modal simple
</button>
<dialog id="modal-6271" class="village-modal" aria-labelledby="modal-6271-title" data-village-concealing-backdrop="false">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-8 village-col-lg-6">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="modal-6271" id="button-6273" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="modal-6271-title" class="village-modal__title">
<span class="village-icon-arrow-right-line village-icon--lg" aria-hidden="true"></span>
Titre de la modale
</h1>
<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>