jQuery ajoute une classe CSS à la bootbox modale de manière dynamique

Question

J'utilise le plugin jQuery appelé Bootboxjs pour mes modaux.

Voici comment j'exécute le code :

bootbox.dialog({
    title: '<i class="fa fa-thumbs-up"/></i>&nbsp;&nbsp;View Likes',
    buttons: {
        close: {
            label: '<i class="fa fa-times"></i>&nbsp;&nbsp;Close',
            className: "btn-danger",
            callback: function() {

                // Close the modal

            }

        }
    },
    message: '<span name="getLikesResults"></span>'
});

Je crée un plugin pour un projet et je ne veux pas que cela affecte les styles modaux existants, mais je dois rendre ce modal spécifique défilable lorsque le contenu atteint la hauteur maximale.

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

Comment pourrais-je appliquer le CSS ci-dessus à cela uniquement bootbox modal?

Answer 1

Tu peux essayer ça

.bootbox-dialog .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

Découvrez ces exemples

http://bootboxjs.com/examples.html

Inspectez les modaux sur les exemples, ils ont chacun une classe personnalisée.Dans le premier exemple, la classe bootbox-alert.Dans le deuxième exemple, la classe bootbox-confirm.

Si votre code suit les exemples.Votre code doit avoir une classe appelée bootbox-dialog sur le modal.

La documentation de bootbox montre que vous pouvez ajouter un nom de classe personnalisé.

http://bootboxjs.com/documentation.html

C'est un bon article sur le fonctionnement des sélecteurs CSS.

http://css-tricks.com/how-css-selectors-work/

Answer 2

Je vous suggère d'ajouter une classe uniquement à votre modal qui aura tous les styles requis.Vous pouvez procéder de cette façon :

bootbox.dialog({
    title: '<i class="fa fa-thumbs-up"/></i>&nbsp;&nbsp;View Likes',
    buttons: {
        close: {
            label: '<i class="fa fa-times"></i>&nbsp;&nbsp;Close',
            className: "btn-danger",
            callback: function() {

                // Close the modal

            }

        }
    },
    message: '<span name="getLikesResults"></span>'
}).addClass('bootboxDanger');

---

.bootboxDanger{
    max-height: 420px;
    overflow-y: auto;
}