SBB SBB - 4 months ago 29
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:

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

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/

Comments