Change modal width only for specific modal in Bootbox

Question

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 1

Try this:

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

Update:

Try Demo

Answer 2

Just as further information...

As the documentation says, you can control the size of the modal with the "size" property in the constructor.

Adds the relevant Bootstrap modal size class to the dialog wrapper.
Valid values are 'large' and 'small' (Default: null)

bootbox.dialog({
    size: <small|large>
});

See Snippet for usage example ^{(best seen in full screen)}

$(".size-by-funcion-0").click(function() {
    bootbox.dialog({
        size: "null",
        title: "Default Size Modal Example",
        message: "...",
    });
});

$(".size-by-funcion-1").click(function() {
    bootbox.dialog({
        size: "small",
        title: "Small Size Modal Example",
        message: "...",
    });
});

$(".size-by-funcion-2").click(function() {
    bootbox.dialog({
        size: "large",
        title: "Large Size Modal Example",
        message: "...",
    });
});

/*********************/
// or make it dynamic... with only one function
$(".dynamic-size").click(function() {
    bootbox.dialog({
        size: $(this).data('size'),
        title: "Dynamic Size Modal Example",
        message: "...",
    });
});

p {
    cursor: pointer;
    background-color: #ccc;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://github.com/makeusabrew/bootbox/releases/download/v4.3.0/bootbox.min.js"></script>

<p class="size-by-funcion-0">Modal with the default size</p>
<p class="size-by-funcion-1">Modal with "size:small"</p>
<p class="size-by-funcion-2">Modal with "size:large"</p>

<hr />

<p class="dynamic-size" data-size="null">Modal with "size:default"</p>
<p class="dynamic-size" data-size="small">Modal with "size:small"</p>
<p class="dynamic-size" data-size="large">Modal with "size:large"</p>

More info on source: http://bootboxjs.com/documentation.html

Note: Requires Bootstrap 3.1.0 or newer.