JQuery Aggiungi CSS Class a BootBox Modal in modo dinamico

Question

Sto usando il plugin jQuery chiamato Bootboxjs per i miei modali.

Ecco come eseguo il codice:

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>'
});

.

Sto facendo un plug-in per un progetto e non voglio che questo influire sugli stili modali esistenti, ma ho bisogno di rendere questo specifico modale scorrevole quando il contenuto raggiunge l'altezza massima.

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

.

Come posso applicare il CSS sopra a solo questo bootbox Modal?

Answer 1

Puoi provare questo

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

.

Controlla questi esempi

http://bootboxjs.com/examples.html

Ispezionare i modali sugli esempi che ciascuno hanno una classe personalizzata.Nel primo avviso di bootbox di classe di esempio.Nella seconda classe di esempio di esempio, conferma.

Se il tuo codice segue gli esempi. Il tuo codice dovrebbe avere una classe chiamata bootbox-dialog sul modale.

I documenti di bootbox mostrano di aggiungere un nome di classe personalizzato.

http://bootboxjs.com/documentation.html

Questa è una buona scrittura su come funzionano i selettori CSS.

http://csss-tricks.com/how-css-Selectors-work/

Answer 2

Ti suggerirei di aggiungere la classe solo al tuo modale che avrà tutti gli stili richiesti. Puoi fare in questo modo:

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;
}

.