Jérémy Jeanson's blog
chasseur de bugs depuis .net 1.0

Certains développeurs rapportent des problèmes de voiles noirs persistant après la disparition des boites de dialogue Bootstrap. Ayant eu à plusieurs reprises à résoudre ce problème, je me suis rendu compte que celui-ci n’était pas le fait de Bootstrap, mais de l’usage que l’on en a.

Le problème ne se produit que si l’on utilise veut enchainer les boites de dialogue les unes après les autres. Et l’erreur consiste à n’utiliser qu’une seule Div comme boite de dialogue, ou que l’on ne créer dynamiquement qu’une seule Div.

La solution consiste donc à créer une Div par utilisation et uniquement quand on en a besoin. Bien entendu, la Div doit être supprimée de la page quand elle se ferme.

Voici un exemple de code pour afficher une simple information :

function DialogInformation(title, message) {
    // Suppression des boites de dilog qui peuvent être visibles
    $(".modal").modal('hide');

    // Création de la boite
    var dialog = $("<div class='modal fade' tabindex='-1' role='dialog'><div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>"
        + "<h4 class='modal-title'>" + title + "</h4></div>"
        + "<div class='modal-body'>" + message + "</div>"
         + "<div class='modal-footer'>"
         + "<button type='button' class='btn btn-default' data-dismiss='modal'>Ok</button>"
         + "</div>"
        + "</div></div></div>");
    // Suppression à la fermeture de la boite de dialogue
    dialog.on("hidden.bs.modal", function () {
        dialog.remove();
    });
    // Affichage de la boite de dialogue
    dialog.modal('show');
}

Une variante pour poser des questions à l’utilisateur. En fonction de son choix, on exécute les méthodes successMethode ou dismissMethode :

function DialogQuestion(message, successMethode, dismissMethode) {
    // Création de la boite
    var dialog = $("<div class='modal fade' tabindex='-1' role='dialog'><div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>"
        + "<h4 class='modal-title'>Attention</h4></div>"
        + "<div class='modal-body'>" + message + "</div>"
        + "<div class='modal-footer'></div>"
        + "</div></div></div>");    // Affichage de la boite de dialogue
    // Suppression à la fermeture de la boite de dialogue
    dialog.on("hidden.bs.modal", function () {
        dialog.remove();
    });

    var buttonYes = $("<button type='button' class='btn btn-primary' data-dismiss='modal'>Oui</button>");
    buttonYes.click(successMethode);
    dialog.find(".modal-footer").html(buttonYes);
    if (dismissMethode === undefined) {
        dialog.find(".modal-footer").append("<button type='button' class='btn btn-default' data-dismiss='modal'>Non</button>");
    else {
        var buttonNo = $("<button type='button' class='btn btn-default' data-dismiss='modal'>Non</button>");
        buttonNo.click(dismissMethode);
        dialog.find(".modal-footer").append(buttonNo);
    }

    // Affichage de la boite de dialogue
    dialog.modal("show");
}

Et pour finir une variante utile qui permet d’utiliser Ajax pour inclure de contenu d’une URL dans le corps de la boite de dialogue. L’Id de la Div du body peut être définie pour que celle-ci soit mise à jour via un autre script (ex. : pour faire des aller-retour avec un formulaire d’édition MVC) :

function DialogEdit(title, url, bodyId, successMethode, primaryButtonTitle) {
    $.get(url,
        function (view) {
            if (primaryButtonTitle === undefined) primaryButtonTitle = "Enregistrer";

            // Création de la boite
            var dialog = $("<div class='modal fade' tabindex='-1' role='dialog'><div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>"
                + "<h4 class='modal-title'>" + title + "</h4></div>"
                + "<div class='modal-body' id='" + bodyId + "'></div>"
                + "<div class='modal-footer'></div>"
                + "</div></div></div>");    // Affichage de la boite de dialogue

            // Suppression à la fermeture de la boite de dialogue
            dialog.on("hidden.bs.modal", function () {
                dialog.remove();
            });

            // Ajout de la vue
            dialog.find(".modal-body").html(view);

            // ajout des boutons
            var buttonYes = $("<button type='button' class='btn btn-primary'>" + primaryButtonTitle + "</button>");
            buttonYes.click(successMethode);
            dialog.find(".modal-footer").html(buttonYes);
            dialog.find(".modal-footer").append("<button type='button' class='btn btn-default' data-dismiss='modal'>Annuler</button>");

            // Affichage de la boite de dialogue
            dialog.modal("show");
        }
    );
}