Bootbox 2.0.0

The arrival of Twitter's second major version of Bootstrap heralds a new release of Bootbox, a simple JavaScript library I wrote back in November last year to programatically leverage Bootstrap's modal functionality. Shadowing Twitter's release like this is somewhat inevitable—their 2.0 branch is not compatible with older 1.x releases, so by upgrading Bootbox's dependency it too automatically becomes incompatible with older versions (the fact that this update bumps Bootbox's version to 2.0.0 is coincidental: it hasn't previously and won't continue to match Bootstrap's version).

The Bootbox upgrade process from 1.1.2→2.0.0 is pretty straightforward: this article explains the major changes, discusses some new dependencies and introduces some minor additional functionality.

Dependencies

Naturally, Bootbox now relies on the 2.0 release of bootstrap.css. Similarly, the 2.0 version of bootstrap-modal.js is also required, which in turn relies on jQuery 1.7.1. Lastly, in order to maintain the functionality exhibited by older versions of Bootbox bootstrap-transition.js is required to animate the modals in and out of the screen. So, in rough DOM order:

API changes

The only outward change to Bootbox's public API is related to the class option which can be passed to bootbox.dialog. The available values for this option have always directly mapped to underlying CSS classes and as such now all require a btn- prefix. For example, if you passed a class of danger previously, you now need to pass this as btn-danger—as this what the class is now called in Twitter's framework:

Of course this value just needs to be a valid class, so if you happen to have one called danger which styles up a button, you can still use that.

API additions

Since Twitter no longer offer the ability to animate modals without including an extra JavaScript file (albeit a tiny one, bootstrap-transition.js) it made sense to make dialog animation an option in Bootbox 2.0. Animations are still enabled by default but this can be disabled per dialog as follows:

Overriding this setting for every dialog can be a bit of a pain, so you can alternatively supply a default animation value which will be applied to any dialog created without an explicit animate option:

bootbox.animate() can be called at any time, so you can use it programatically if you wish.

Demo

The demo page has been given a slight lick of paint and now showcases a couple of additional features including the animation options discussed above. It's still rather simplistic so by all means feel free to fork it!

As always any comments, feedback or bug reports are welcome—likewise any suggestions for future versions of the library are always warmly received (if only to bump it off version 2.0.0!).

Related Articles

Comments

Anonymous
How can I add icons, introduced in bootstrap 2.0, to dialog buttons?
Nick
Hi there - there's currently no way to do this but I do like the idea of it - so I'll add it to the feature list.
Smartcore
Thanks, Nick! I think it'll be very welcome addition

Add a comment

Your email address won’t be published you’ll never be sent any spam. Your IP address is captured for auditing purposes and your comment will be moderated before it appears.