jQuery adicionar Classe CSS para bootbox Modal Dinamicamente

Question

Estou usando o jQuery plugin chamado Bootboxjs para o meu modais.

Isto é como eu executar o 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>'
});

Estou a fazer um plugin para um projeto e eu não quero isso para afetar existente modal estilos, mas eu preciso fazer esse específica do modal de barra de deslocamento quando o conteúdo atinge a altura máxima.

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

Como eu poderia aplicar o acima CSS apenas para esse bootbox modal?

Answer 1

Você pode tentar isso

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

Confira estes exemplos

http://bootboxjs.com/examples.html

Inspecionar os modais nos exemplos que cada um tem uma classe personalizada.No primeiro exemplo de classe bootbox-alerta.No segundo exemplo de classe bootbox-confirmar.

Se o seu código segue os exemplos.Seu código deve ter uma classe chamada bootbox-caixa de diálogo modal.

O bootbox docs show, você pode adicionar uma classe personalizada nome.

http://bootboxjs.com/documentation.html

Este é um bom escrever sobre como os seletores de trabalho.

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

Answer 2

Gostaria de sugerir que você adicionar classe para seu modal, que terá todos os estilos necessários.Você pode fazer assim:

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