Bootbox.js is a javascript library that makes Bootstrap modal easier with just a few lines of code.
Setting
There are many ways to add this library to your application:
- Use NPM
1 2 | npm i bootbox |
- Use cdnjs
https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js
- Direct download
https://github.com/makeusabrew/bootbox/releases/download/v5.4.0/bootbox.min.js
Note: Bootbox is based on Boostrap and jQuery , so you need to have these 2 libraries installed so that Bootbox can run.
Using:
After installation is complete, you simply call the methods of Bootbox in your js and you’re done.
Alert Dialog
- Basic
1 2 3 | bootbox <span class="token punctuation">.</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">"Your message here…"</span> <span class="token punctuation">)</span> |
- You can also use html text:
1 2 | bootbox <span class="token punctuation">.</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">"Your message <b>here…</b>"</span> <span class="token punctuation">)</span> |
- If you need to execute the code after dismissing the alert, you must use the callback:
1 2 3 4 | bootbox <span class="token punctuation">.</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">"Your message here…"</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* your callback code */</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
- You can customize the alert as follows:
1 2 3 4 5 6 7 | bootbox <span class="token punctuation">.</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> size <span class="token punctuation">:</span> <span class="token string">"small"</span> <span class="token punctuation">,</span> title <span class="token punctuation">:</span> <span class="token string">"Your Title"</span> <span class="token punctuation">,</span> message <span class="token punctuation">:</span> <span class="token string">"Your message here…"</span> <span class="token punctuation">,</span> callback <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* your callback code */</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
In which size: “small” | “large” | “extra-large”
Confirm Dialog
- Basic
1 2 3 4 | bootbox <span class="token punctuation">.</span> <span class="token function">confirm</span> <span class="token punctuation">(</span> <span class="token string">"Are you sure?"</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> result <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* your callback code */</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
Here, the default alert will have two actions: cancel and ok. If cancel, the result will be false, if ok then the result will be true. 
- You can customize this confirmation as follows:
1 2 3 4 5 6 | bootbox <span class="token punctuation">.</span> <span class="token function">confirm</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> size <span class="token punctuation">:</span> <span class="token string">"small"</span> <span class="token punctuation">,</span> message <span class="token punctuation">:</span> <span class="token string">"Are you sure?"</span> <span class="token punctuation">,</span> callback <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> result <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* result is a boolean; true = OK, false = Cancel*/</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
In which size: “small” | “large” | “extra-large” 
Custom Dialog
Above the Alert Dialog and confirm dialog is the dialog available in Bootbox.js, but many of you can customize the new dialog type according to your needs as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | bootbox <span class="token punctuation">.</span> <span class="token function">dialog</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> title <span class="token punctuation">:</span> <span class="token string">'Custom Dialog Example'</span> <span class="token punctuation">,</span> message <span class="token punctuation">:</span> <span class="token string">'<p>This dialog demonstrates many of the options available when using the Bootbox library</p>'</span> <span class="token punctuation">,</span> size <span class="token punctuation">:</span> <span class="token string">'large'</span> <span class="token punctuation">,</span> onEscape <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> backdrop <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> buttons <span class="token punctuation">:</span> <span class="token punctuation">{</span> fee <span class="token punctuation">:</span> <span class="token punctuation">{</span> label <span class="token punctuation">:</span> <span class="token string">'Fee'</span> <span class="token punctuation">,</span> className <span class="token punctuation">:</span> <span class="token string">'btn-primary'</span> <span class="token punctuation">,</span> callback <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> fi <span class="token punctuation">:</span> <span class="token punctuation">{</span> label <span class="token punctuation">:</span> <span class="token string">'Fi'</span> <span class="token punctuation">,</span> className <span class="token punctuation">:</span> <span class="token string">'btn-info'</span> <span class="token punctuation">,</span> callback <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> fo <span class="token punctuation">:</span> <span class="token punctuation">{</span> label <span class="token punctuation">:</span> <span class="token string">'Fo'</span> <span class="token punctuation">,</span> className <span class="token punctuation">:</span> <span class="token string">'btn-success'</span> <span class="token punctuation">,</span> callback <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> fum <span class="token punctuation">:</span> <span class="token punctuation">{</span> label <span class="token punctuation">:</span> <span class="token string">'Fum'</span> <span class="token punctuation">,</span> className <span class="token punctuation">:</span> <span class="token string">'btn-danger'</span> <span class="token punctuation">,</span> callback <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
Inside:
- title: title of the dialog
- message: Content needs to be displayed in the dialog.
- size: “small” | “large” | “extra-large”.
- onEscape: true | false. Is there a dismiss dialog with the ESC.
- backdrop: true | false. Do you need show backdrop or not.
- buttons: buttons to display. including
label,classNameandcallback.
This article is a basic guide on how to use this Bootbox.js. In addition to other methods, events. You can view the details and learn more on its documentation.