Bootbox.js is a small JavaScript library developed on top of the Twitter’s Bootstrap which allows you to create programmatic dialog boxes like alert, confirm, prompt etc. In short, it’s a wrappers for JavaScript alert(), confirm() and other flexible dialogs using Twitter’s bootstrap framework.
Only following line of code will display a Bootstrap alert.
bootbox.alert("Hello world!");
But if you try to achieve it via Bootstrap, you need to write multiple lines of code.
Core Methods of Bootbox.js
- bootbox.alert(message, callback)
- bootbox.prompt(message, callback)
- bootbox.confirm(message, callback)
- bootbox.dialog(options)
Before we look into examples, let’s see dependencies of bootbox.
Since we know that Bootbox is developed on top of Bootstrap, it is required.
Css Dependencies:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
Javascript (JS) dependencies:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="bootstrap.min.js"></script>
Examples
1. Alert
$(document).ready(function () { bootbox.alert("Hello world!"); });
2. Confirm
$(document).ready(function () { bootbox.confirm("Are you sure?", function(result) { alert('You clicked: ' + result); }); });
3. Prompt
bootbox.prompt("What is your city?", function(result) { if (result === null) { alert("Prompt dismissed"); } else { alert("Your city is " + result); } });
4. Dialog
bootbox.dialog({ message: "Custom dialog using Bootbox", title: "Bootbox Dialog", buttons: { success: { label: "Yes", className: "btn-success", callback: function() { alert("You clicked Yes"); } }, danger: { label: "No", className: "btn-danger", callback: function() { alert("You clicked No"); } }, main: { label: "Not Sure", className: "btn-primary", callback: function() { alert("You clicked Not Sure"); } } } });
Please note: It’s not necessary to call Bootbox API on document.ready, it’s for demo purpose only. You can call Bootbox API on any event.
Related articles
- Bootbox.js Official Site (bootboxjs.com)
- Bootbox.js API Documentation (bootboxjs.com)
- AngularJS – A Javascript MVC Framework (surajdeshpande.wordpress.com)
Assuming this build is for Bootstrap 3.x (or is it backwards compatible as well)
LikeLike
Hi Mike,
For this post, I have used latest Bootbox 4.x.x which depends on Boobstrap 3.0.
If you go through following link:
http://bootboxjs.com/
and search for the term “Dependencies”, you can find the detail dependency chart for the same.
Screenshot for your reference
Cheers!!
LikeLike