SBB SBB - 8 months ago 73
CSS Question

jQuery add CSS Class to bootbox Modal Dynamically

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

This is how I run the code:

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


You can try this

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

Check out these examples

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.

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