javascript - jQuery add CSS Class to bootbox Modal Dynamically - Stack Overflow

admin管理员组

文章数量:1291029

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?

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?

• javascript
• jquery
• css
• twitter-bootstrap
• bootbox

Share Improve this question Follow edited Aug 2, 2014 at 2:35 Pang 10.1k146146 gold badges8686 silver badges124124 bronze badges asked Aug 1, 2014 at 21:41 SBBSBB 8,9803535 gold badges118118 silver badges233233 bronze badges 1

• Instead of .modal .modal-body try applying it to .bootbox-body. – mccannf Commented Aug 2, 2014 at 21:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can try this

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

Check out these examples

http://bootboxjs./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./documentation.html

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

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

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

本文标签： javascriptjQuery add CSS Class to bootbox Modal DynamicallyStack Overflow