jQuery add CSS Class to bootbox Modal Dynamically

Question

I am using the jQuery plugin called Bootboxjs for my modals.

This is how I run the 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>'
});

I am making a plugin for a project and I don't want this to affect existing modal styles but I need to make this specific modal scrollable when the content reaches the max height.

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

How could I apply the above CSS to just this bootbox modal?

Answer 1

You can try this

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

Check out these examples

http://bootboxjs.com/examples.html

Inspect the modals on the examples they each have a custom class. In the first example class bootbox-alert. In the second example class bootbox-confirm.

If your code follows the examples. Your code should have a class called bootbox-dialog on the modal.

The bootbox docs show you can add a custom class name.

http://bootboxjs.com/documentation.html

This is a good write up on how the css selectors work.

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

Answer 2

I would suggest you to add class only to your modal that'll have all the required styles. You can do this way:

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