CODEWITHSUNDEEP
jquerycsstwitter-bootstrapbootbox
user2571510
user2571510

Reputation: 11377

Change modal width only for specific modal in Bootbox

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

Upvotes: 8

Views: 17813

Answers (3)

Gregorio
Gregorio

Reputation: 428

If the solution from Moshtaf doesn't work, complete it with one more line:

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

This is because Bootbox includes too a default value for max-width that can overwrite the definition for width.

Upvotes: 0

gmo
gmo

Reputation: 9010

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.

Upvotes: 6

Moshtaf
Moshtaf

Reputation: 4903

Try this:

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


Update:

Try Demo

Upvotes: 14

Related Questions