jQuery agrega clase CSS al bootbox modal dinámicamente

Question

Estoy usando el complemento jQuery llamado Bootboxjs para mis modales.

Así es como ejecuto el código:

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

Estoy creando un complemento para un proyecto y no quiero que esto afecte los estilos modales existentes, pero necesito hacer que este modal específico se pueda desplazar cuando el contenido alcance la altura máxima.

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

¿Cómo podría aplicar el CSS anterior solo a esto? bootbox ¿modal?

Answer 1

Puedes probar esto

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

Mira estos ejemplos

http://bootboxjs.com/examples.html

Inspeccione los modales en los ejemplos, cada uno tiene una clase personalizada.En el primer ejemplo, clase bootbox-alert.En el segundo ejemplo, clase bootbox-confirm.

Si su código sigue los ejemplos.Su código debe tener una clase llamada bootbox-dialog en el modal.

Los documentos de arranque muestran que puede agregar un nombre de clase personalizado.

http://bootboxjs.com/documentation.html

Este es un buen artículo sobre cómo funcionan los selectores CSS.

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

Answer 2

Le sugeriría que agregue clase solo a su modal que tendrá todos los estilos requeridos.Puedes hacerlo de esta manera:

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