Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required DOM elements or JS event handlers.
Build your own Dialogs!
Each Bootbox function calls a fourth public function, dialog()
, which you can use to create your own custom dialogs. Refer to the documentation page for use and for options available for each function.
Must Read: Implementing Pop-up Dialogs, Messages with CSS3 | jquery-popup
How to make use of it:
1. Include jQuery Library and Bootbox.js
.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/bootbox.min.js"></script>
2. Include Bootstrap information.
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> <script src="/path/to/bootstrap.min.js"></script>
3. Create an alert popup box.
bootbox.alert("Alert!"); // or bootbox.alert({ size: "small", title: "Dialog Title", message: "Your message here…", callback: function(){} })
4. Create a confirmation popup box.
bootbox.confirm("Are you sure?", function(result){ alert('confirmed') }) // or bootbox.confirm({ size: "small", message: "Are you sure?", callback: function(result){ alert('confirmed') } })
5. Create an immediate popup box.
bootbox.prompt("What is your name?", function(result){ // do something }) // or bootbox.prompt({ value: '', // initial value inputType: 'input', // any form elements inputOptions: {}, min: null, // min value max: null, // max value step: null, // step size maxlength: null, // max length pattern: '', // require the input value to follow a specific format placeholder: '', required: true, // if is required multiple: false, // allows users to select more than one option when using the select input type size: "small", title: "What is your name?", callback: function(result){ // result = String containing user input if OK clicked or null if Cancel clicked } })
6. Create a customized popup box.
bootbox.dialog({ message: 'HTML content here' })
7. Global options with default values.
bootbox.dialog({ // dialog message message: 'HTML content here', // title title: 'dialog title', // shows the dialog immediately show: true, // default language locale: 'en', // dialog container container: 'body', // default value (used by the prompt helper) value: '', // default input type (used by the prompt helper) inputType: 'text', // enables backdrop or not backdrop: null, // shows close button closeButton: true, // enables animations or not animate: true, // extra CSS class className: null, // dialog size size: 'small', // flips the order in which the buttons are rendered, from cancel/confirm to confirm/cancel swapButtonOrder: false, // adds the the modal-dialog-centered to the doalog centerVertical: false, // Append "multiple" property to the select when using the "prompt" helper multiple: false, // Automatically scroll modal content when height exceeds viewport height scrollable: false // dismisses the dialog by hitting ESC onEscape: true, // custom action buttons buttons: {}, // callback callback: function(){} })
8. Determine if the popup box is reusable.
bootbox.dialog({ // whether or not to destroy the modal on hide reusable: false })
9. API strategies.
// sets options bootbox.setDefaults({ // options here }); // sets local bootbox.setLocale('en'); // adds local bootbox.addLocale(String name, object values); // removes local bootbox.removeLocale(String name); // hides all dialog boxes bootbox.hideAll();
Available Locales/Languages
The languages are used to provide a translation for each of the built-in command buttons (OK, CANCEL, and CONFIRM).
Key | Name |
---|---|
ar | Arabic |
az | Azerbaijani |
bg-BG | Bulgarian |
cs | Czech |
da | Danish |
de | German |
el | Greek |
en | English |
es | Spanish / Español |
et | Estonian |
eu | Basque |
fa | Farsi / Persian |
fi | Finnish |
fr | French / Français |
he | Hebrew |
hr | Croatian |
hu | Hungarian |
id | Indonesian |
it | Italian |
ja | Japanese |
ka | Georgian |
ko | Korean |
lt | Lithuanian |
lv | Latvian |
nl | Dutch |
no | Norwegian |
pl | Polish |
pt | Portuguese |
pt-BR | Portuguese – Brasil |
ru | Russian |
sk | Slovak |
sl | Slovenian |
sq | Albanian |
sv | Swedish |
sw | Swahili |
ta | Tamil |
th | Thai |
tr | Turkish |
uk | Ukrainian |
zh-CN | Chinese (People’s Republic of China) |
zh-TW | Chinese (Taiwan / Republic of China) |
See Demo And Download

Official Website(makeusabrew): Click Here
This superior jQuery/javascript plugin is developed by makeusabrew. For extra Advanced Usage, please go to the official website.