What is Bootbox? First, Bootstrap is a CSS framework for building modern and responsive applications that look good on both desktop computers, tablets and mobile phones. The main website is at bootboxjs.com.

Bootbox is a free, open source project. Bootbox was originally created in 2011 with the sole purpose of wrapping JavaScript’s low level dialog functions with Bootstrap’s high level modal functionality. As such it is a small library focussed on providing basic programmatic dialogs with minimal fuss and overhead.

The library exposes three functions designed to mimic their native JavaScript equivalents. Their exact function signatures are flexible as each can take various parameters to customise labels and specify defaults, but they are most commonly called like so

• Alert – bootbox.alert(message, callback)
• Prompt – bootbox.prompt(message, callback)
• Confirm – bootbox.confirm(message, callback)

In our web applications, we can replace the native JavaScript confirmation box with a Bootstrap dialog box. The easiest way to do this is to use Bootbox. You can do it manually and there are instructions out there for that, but Bootbox is easier to do. You can do this in you ASP.NET MVC applications if you wish.

The most simple use of a Bootbox modal is to show a message and ask the user to press the OK button after they have read it.

bootbox.alert("Your message here…")

You get something lke the following screen shot from Bootbox website.

Callback Function

Here is another use.

bootbox.alert({ 
  size: "small",
  title: "Your Title",
  message: "Your message here…", 
  callback: function(){ /* your callback code */ }
})

You will need to write a callback function and insert it where indicated in the above code. What is a callback function? A callback function, also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction.

Visual Studio

In Visual Studio, if you want to use Bootbox you will need to install it using the Package Manager. Here we are specifying the version 4.3.0. After running this you will notice two new files in the Scripts folder: bootbox.js and bootbox.min.js. Once these two are installed you need to reference them in the Bundle. In ASP.NET you don’t need to use the minified version because you end up with a minified version when you compile in Release mode. In Solution Explorer, go to the App_Start folder, open BundleConfig.cs, scrool down to the bootstrap bundles and add a line of code to reference it like this: “~/Scripts/bootbox.js”

install-package bootbox -version:4.3.0

Known Limitations of Bootbox

All Bootstrap modals, unlike native alerts, confirms, or prompts, generate non-blocking events. Because of this limitation, code that should not be evaluated until a user has dismissed your dialog should be placed (or called) within the callback function of the dialog. Also, multiple open modal dialog boxes are not supported.