Modales Bootstrap 4 : Dialogues et Popups

Structure de base — ouvrir une modale

Une modale Bootstrap 4 est déclenchée par un bouton via data-toggle="modal" et data-target="#id". Elle est composée de .modal-header, .modal-body et .modal-footer.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#maModale">
    Ouvrir la modale
</button>

<div class="modal fade" id="maModale" tabindex="-1" role="dialog"
     aria-labelledby="maModaleTitre" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="maModaleTitre">Titre de la modale</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Contenu principal de la modale.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-primary">Valider</button>
            </div>
        </div>
    </div>
</div>

Tailles et positions

Ajoutez une classe sur .modal-dialog pour changer la taille. .modal-dialog-centered centre verticalement.

<div class="modal-dialog modal-sm">...</div>       <!-- Petite -->
<div class="modal-dialog">...</div>               <!-- Standard -->
<div class="modal-dialog modal-lg">...</div>       <!-- Grande -->
<div class="modal-dialog modal-dialog-centered">...</div> <!-- Centrée -->

Modale avec formulaire

Les modales sont idéales pour les formulaires de connexion ou d'inscription sans quitter la page courante.

<button class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
    Se connecter
</button>

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Connexion</h5>
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label>Adresse email</label>
                        <input type="email" class="form-control" placeholder="exemple@email.com">
                    </div>
                    <div class="form-group">
                        <label>Mot de passe</label>
                        <input type="password" class="form-control">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                <button class="btn btn-primary">Se connecter</button>
            </div>
        </div>
    </div>
</div>

Modale de confirmation

Pattern essentiel avant une action destructive : supprimer un élément, vider un panier, réinitialiser des données.

<button class="btn btn-danger" data-toggle="modal" data-target="#confirmSuppr">
    Supprimer le compte
</button>

<div class="modal fade" id="confirmSuppr" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body text-center pt-4">
                <p class="h5">Supprimer le compte ?</p>
                <p class="text-muted">Cette action est irréversible.</p>
            </div>
            <div class="modal-footer justify-content-center border-0 pb-4">
                <button class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                <button class="btn btn-danger" data-dismiss="modal">Oui, supprimer</button>
            </div>
        </div>
    </div>
</div>

Contrôle via JavaScript

Vous pouvez ouvrir/fermer une modale programmatiquement et écouter ses événements.

// Ouvrir / fermer / toggle
$('#maModale').modal('show');
$('#maModale').modal('hide');
$('#maModale').modal('toggle');

// Événements du cycle de vie
$('#maModale').on('shown.bs.modal', function () {
    // La modale est pleinement ouverte — focus le premier champ
    $(this).find('input:first').focus();
});

$('#maModale').on('hidden.bs.modal', function () {
    // La modale est fermée — réinitialiser le formulaire
    $(this).find('form')[0].reset();
});

Bonnes pratiques