Retour

Modale (modal)

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

Modale simple

Titre de la modale

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.

<button class="fr-btn" data-fr-opened="false" aria-controls="modal-1012">
    Modal simple
</button>
<dialog id="modal-1012" class="fr-modal" role="dialog" aria-labelledby="modal-1012-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-btn--close fr-btn" aria-controls="modal-1012" title="Fermer">
                            Fermer
                        </button>
                    </div>
                    <div class="fr-modal__content">
                        <h1 id="modal-1012-title" class="fr-modal__title">
                            <span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
                            Titre de la modale
                        </h1>
                        <p>Lorem [...] elit ut.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</dialog>

Modale SM

Titre de la modale

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.

<button class="fr-btn" data-fr-opened="false" aria-controls="modal-1015">
    Modal SM
</button>
<dialog id="modal-1015" class="fr-modal" role="dialog" aria-labelledby="modal-1015-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-btn--close fr-btn" aria-controls="modal-1015" title="Fermer">
                            Fermer
                        </button>
                    </div>
                    <div class="fr-modal__content">
                        <h1 id="modal-1015-title" class="fr-modal__title">
                            <span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
                            Titre de la modale
                        </h1>
                        <p>Lorem [...] elit ut.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</dialog>

Modale LG

Titre de la modale

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.

<button class="fr-btn" data-fr-opened="false" aria-controls="modal-1018">
    Modal LG
</button>
<dialog id="modal-1018" class="fr-modal" role="dialog" aria-labelledby="modal-1018-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-btn--close fr-btn" aria-controls="modal-1018" title="Fermer">
                            Fermer
                        </button>
                    </div>
                    <div class="fr-modal__content">
                        <h1 id="modal-1018-title" class="fr-modal__title">
                            <span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
                            Titre de la modale
                        </h1>
                        <p>Lorem [...] elit ut.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</dialog>

Modale formulaire

Titre de la modale

Légende pour l’ensemble de champs

<button class="fr-btn" data-fr-opened="false" aria-controls="modal-1021">
    Modal formulaire
</button>
<dialog id="modal-1021" class="fr-modal" role="dialog" aria-labelledby="modal-1021-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-btn--close fr-btn" aria-controls="modal-1021" title="Fermer">
                            Fermer
                        </button>
                    </div>
                    <div class="fr-modal__content">
                        <h1 id="modal-1021-title" class="fr-modal__title">
                            <span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
                            Titre de la modale
                        </h1>
                        <form action="">
                            <div class="fr-form-group">
                                <fieldset class="fr-fieldset">
                                    <legend class="fr-fieldset__legend" id='-legend'>
                                        Légende pour l’ensemble de champs
                                    </legend>
                                    <div class="fr-fieldset__content">
                                        <div class="fr-input-group">
                                            <label class="fr-label" for="undefined-1">
                                                Label champs de saisie
                                            </label>
                                            <input class="fr-input" type="text" id="undefined-1" name="undefined-1">
                                        </div>
                                        <div class="fr-input-group">
                                            <label class="fr-label" for="undefined-2">
                                                Label champs de saisie
                                            </label>
                                            <input class="fr-input" type="text" id="undefined-2" name="undefined-2">
                                        </div>
                                        <div class="fr-input-group">
                                            <label class="fr-label" for="undefined-3">
                                                Label champs de saisie
                                            </label>
                                            <input class="fr-input" type="text" id="undefined-3" name="undefined-3">
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <button class="fr-btn" title="Envoyer">
                                Label bouton
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</dialog>

Modale avec iframe

Titre de la modale

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.

<button class="fr-btn" data-fr-opened="false" aria-controls="modal-1024">
    Modal iframe
</button>
<dialog id="modal-1024" class="fr-modal" role="dialog" aria-labelledby="modal-1024-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-btn--close fr-btn" aria-controls="modal-1024" title="Fermer">
                            Fermer
                        </button>
                    </div>
                    <div class="fr-modal__content">
                        <h1 id="modal-1024-title" class="fr-modal__title">
                            <span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
                            Titre de la modale
                        </h1>
                        <p>Lorem [...] elit ut.</p>
                        <iframe title="Titre de l&#39;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>

Modal avec zone d'action

Titre de la modale

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.

<button class="fr-btn" data-fr-opened="false" aria-controls="modal-1027">
    Modale avec zone d&#39;action
</button>
<dialog id="modal-1027" class="fr-modal" role="dialog" aria-labelledby="modal-1027-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-btn--close fr-btn" aria-controls="modal-1027" title="Fermer">
                            Fermer
                        </button>
                    </div>
                    <div class="fr-modal__content">
                        <h1 id="modal-1027-title" class="fr-modal__title">
                            <span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></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-icon-checkbox-circle-line fr-btn--icon-left">
                                    Label bouton
                                </button>
                            </li>
                            <li>
                                <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">
                                    Label bouton
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</dialog>

Modal avec zone d'action ancré en haut

Titre de la modale

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.

<button class="fr-btn" data-fr-opened="false" aria-controls="modal-1030">
    Modale ancrée en haut
</button>
<dialog id="modal-1030" class="fr-modal fr-modal--top" role="dialog" aria-labelledby="modal-1030-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-btn--close fr-btn" aria-controls="modal-1030" title="Fermer">
                            Fermer
                        </button>
                    </div>
                    <div class="fr-modal__content">
                        <h1 id="modal-1030-title" class="fr-modal__title">
                            <span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></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-icon-checkbox-circle-line fr-btn--icon-left">
                                    Label bouton
                                </button>
                            </li>
                            <li>
                                <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">
                                    Label bouton
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</dialog>

Modale simple non refermable au click sur le fond

Titre de la modale

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.

<button class="fr-btn" data-fr-opened="false" aria-controls="modal-1033">
    Modal simple
</button>
<dialog id="modal-1033" class="fr-modal" role="dialog" aria-labelledby="modal-1033-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 class="fr-btn--close fr-btn" aria-controls="modal-1033" title="Fermer">
                            Fermer
                        </button>
                    </div>
                    <div class="fr-modal__content">
                        <h1 id="modal-1033-title" class="fr-modal__title">
                            <span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
                            Titre de la modale
                        </h1>
                        <p>Lorem [...] elit ut.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</dialog>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.