Change modal width only for specific modal in Bootbox

user2571510 picture user2571510 · Aug 10, 2014 · Viewed 16.7k times · Source

I am using Bootbox 4 with Bootstrap 3 on IE (IE 8 / IE 9) and everything works as intended.

It looks like in Bootstrap 3 you can set the modal width in CSS as follows, however, anything like this would then change all my modals:

.modal-dialog {
    width:70% !important;
}

Is there a way in CSS, jQuery or the Bootbox settings that I can change the width of a Bootbox alert modal only for one specific modal? The Bootbox page only has a very short documentation and I couldn't find information on this anywhere else.

Update

JS that creates the specific modal (with sample data):

bootbox.dialog({
    message: " \
        <table class='table table-hover'> \
            <thead> \
                <tr> \
                    <th>Item Name</th> \
                    <th>Location</th> \
                    <th>Path</th> \
                    <th>Last Update</th> \
                </tr> \
            </thead> \
            <tbody> \
                <tr> \
                    <td>Item 1</td> \
                    <td>Navbar - Level 2</td> \
                    <td>Products - blabla</td> \
                    <td>Added by xxx on 05 Aug 2014</td> \
                </tr> \
            </tbody> \
        </table>",
    title: "Search Results",
    buttons: {
        main: {
            label: "Close",
            className: "btn-primary"
        }
    },
    className: "modal70"
});

And my current CSS:

.modal-dialog.modal70 {
    width:70% !important;
}

Answer

Moshtaf picture Moshtaf · Aug 10, 2014

Try this:

.modal70 > .modal-dialog {
    width:70% !important;
}


Update:

Try Demo