Bootstrap and bootbox: dynamically change the width of confirmation window

Question

I am using Bootstrap for a web application and using bootbox (http://bootboxjs.com) for showing a window before proceeding with a delete operation.

For different delete options, I need to display different messages. I would like to show confirmation windows with different widths.

How can I do this dynamically in javascript code? I looked at everything and am unable to find a solution.

Thanks for any ideas and suggestions!

Cheers.

why do you accept an answer that doesn't even work? The other answer is better. — OnTheFly, Sep 27 '13 at 09:59

score 27 · Answer 1 · answered May 22 '14 at 12:38

27

None of the answers above worked for me so I fiddled around until the following did what I expected (using Bootbox.js v4.2.0)

Javascript:

bootbox.alert("Hello").find("div.modal-dialog").addClass("largeWidth");

CSS:

.largeWidth {
    margin: 0 auto;
    width: 90%;
}

answered May 22 '14 at 12:38

SirDorius

372
4
6

5

You can use default bootstrap classes, like modal-sm. So your code could be: **bootbox.alert("Hello").find("div.modal-dialog").addClass("modal-sm");** less custom css lines in your code using already existant classes. – user991 Jun 23 '14 at 18:50

Nick N. · Accepted Answer · 2013-09-27T09:56:23.417

It is possible to add custom classes to bootbox windows with 'bootbox.classes'. I think you should make some standard CSS classes like small, medium, large and asign a width in CSS.

Then in every bootbox use a line like below (e.g.):

bootbox.classes.add('medium');

According to the the documentation bootbox.classes is a helper method, so it should work. http://bootboxjs.com/documentation.html

It seems to be taken out of the documentation, I have no clue if above method still works.

Below is another implementation to add your own class to a dialog (e.g.):

bootbox.dialog({

  message: "I am a custom dialog",
  animate: true,

  /**
   * @optional String
   * @default: null
   * an additional class to apply to the dialog wrapper
   */
  className: "medium"
  }
});

This is no longer in the documentation...taken out? – user Sep 26 '13 at 18:17 — user, Sep 26 '13 at 18:17
New version uses bootbox.setDefaults(options-object); – Ankur Verma Feb 25 '15 at 16:27 — Ankur Verma, Feb 25 '15 at 16:27

score 7 · Answer 3 · answered Dec 11 '13 at 22:45

Use jQuery .AddClass chained to the end of bootbox.confirm. My implementation looks like...

$("a#ArchiveBtn").click(function () {
    bootbox.confirm("Archive Location? Cannot be undone", function (result) {
        if (result) {
            $("form#ArchiveForm").submit();
        }

    }).find("div.modal-content").addClass("confirmWidth");
});

CSS...

/* BootBox Extension*/
.confirmWidth {
    width: 350px;
    margin: 0 auto;
}

score 5 · Answer 4 · answered Feb 24 '17 at 17:52

Just adding to previous answers on jquery'ing bootbox alert.

Consider you would like to use a one-liner rather than relying on a declaration of a css class separately. Just do, for example,

bootbox.alert("Customizing width and height.").find("div.modal-dialog").css({ "width": "100%", "height": "100%" });

Jquery's .css() does the trick so you can get rid of .addClass().

score 4 · Answer 5 · edited Jul 02 '13 at 01:47

4

When setting up your box give it a seperate css class

<style>
   .class-with-width { width: 150px !important; }
</style>
<script>
bootbox.dialog("I am a custom dialog", [{
    "label" : "Success!",
    "class" : "class-with-width",
    "callback": function() {
        Example.show("great success");
    }
}]);
<script>

edited Jul 02 '13 at 01:47

messivanio

2,263
18
24

answered Jul 02 '13 at 00:45

Michael Grassman

1,935
13
21

Michael, thanks for chimiing in. I am using bootbox.confirm(). According to the API page (http://bootboxjs.com/documentation.html), it does not allow the configuration you gave. Did I miss something? This is just a comment: defining a class for each box is really not a good solution. – curious1 Jul 02 '13 at 02:21
I was looking at the examples page under custom dialog. http://bootboxjs.com/index.html#examples For suggesting to use a class for each width was because that was the only way the documentation showed setting any formatting properties. – Michael Grassman Jul 02 '13 at 06:13
2

why do you accept an answer that doesn't even work? The other answer is better. – OnTheFly Sep 27 '13 at 09:58

score 2 · Answer 6 · answered Jan 05 '17 at 21:50

You can use the size property. It adds the relevant Bootstrap modal size class to the dialog wrapper. Valid values are 'large' and 'small'

bootbox.setDefaults({ size: 'small' });

Or you can use the className property. It's an additional class to apply to the dialog wrapper.

bootbox.setDefaults({ className: 'w-100' });

Css

// Example class (a bootstrap v4 utility class)
.w-100 {
    width: 100%;
}

I use setDefaults in these examples but these properties can be used on any bootbox dialog, you will override the defaults this way.

bootbox.alert({ message: 'But without me how can you have mass?', className: 'w-100' })

To preserve the defaults you can chain a jQuery call or even access the actual DOM ;).

bootbox.alert('Whoops!').addClass('w-100');
bootbox.alert('Sorry!')[0].classList.add('w-100');

bootbox.classes isn't supported in versions > 4.4.0

score 1 · Answer 7 · answered Mar 23 '15 at 16:40

1

To resize the whole dialog, please, use "div.modal-dialog" instead of "div.modal-content":

.find("div.modal-dialog").addClass("confirmWidth");

The css used is simply e.g.:

.confirmWidth {
  width:350px;
}

answered Mar 23 '15 at 16:40

vess

502
7
11

score 1 · Answer 8 · edited Jun 17 '16 at 11:22

1

Use this- size:"small" or size:"large"

edited Jun 17 '16 at 11:22

Jenis Patel

1,617
1
13
20

answered Jun 17 '16 at 10:17

Om Shankar

265
4
11

Or 'extra-large'! – dandeto May 13 '22 at 18:06

Bootstrap and bootbox: dynamically change the width of confirmation window

8 Answers8