This time I will share jQuery Plugin and tutorial about jQuery Dialog Boxes Plugin for Bootstrap – Bootbox, hope it will help you in programming stack.
| File Size: | 242 KB |
|---|---|
| Views Total: | 26020 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Bootbox is a tiny jQuery plugin for creating alert, confirm and flexible dialog boxes using Twitter’s Bootstrap framework.
Currently works with the latest Bootstrap 4 and Bootstrap 3 frameworks.
The library exposes three methods designed to mimic their native JavaScript equivalents. Their exact method signatures are flexible as each can take various parameters to customise labels and specify defaults, but they are most commonly called like so:
- bootbox.alert(message, callback)
- bootbox.prompt(message, callback)
- bootbox.confirm(message, callback)
You might also like:
- Lightweight Modal Dialog Plugin – SimpleModal
- Modern Modal Dialogs – ModalBox
- Powerful jQuery Dialog Box Plugin – Zebra_Dialog
- Modal Dialog Windows Plugin – leanModal
- SimpleModal – Beautiful Popup Window Plugin
Basic Usage:
1. Include jQuery Library and Bootbox.js.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/bootbox.min.js"></script> |
2. Include Bootstrap files.
1 |
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> |
2 |
<script src="/path/to/bootstrap.min.js"></script> |
3. Create an alert popup box.
1 |
bootbox.alert("Alert!"); |
2 |
// or |
3 |
bootbox.alert({ |
4 |
size: "small", |
5 |
title: "Dialog Title", |
6 |
message: "Your message here…", |
7 |
callback: function(){} |
8 |
}) |
4. Create a confirmation popup box.
01 |
bootbox.confirm("Are you sure?", function(result){ |
02 |
alert('confirmed') |
03 |
}) |
04 |
// or |
05 |
bootbox.confirm({ |
06 |
size: "small", |
07 |
message: "Are you sure?", |
08 |
callback: function(result){ |
09 |
alert('confirmed') |
10 |
} |
11 |
}) |
5. Create a prompt popup box.
01 |
bootbox.prompt("What is your name?", function(result){ |
02 |
// do something |
03 |
}) |
04 |
// or |
05 |
bootbox.prompt({ |
06 |
value: '', // initial value |
07 |
inputType: 'input', // any form elements |
08 |
inputOptions: {}, |
09 |
min: null, // min value |
10 |
max: null, // max value |
11 |
step: null, // step size |
12 |
maxlength: null, // max length |
13 |
pattern: '', // require the input value to follow a specific format |
14 |
placeholder: '', |
15 |
required: true, // if is required |
16 |
multiple: false, // allows users to select more than one option when using the select input type |
17 |
size: "small", |
18 |
title: "What is your name?", |
19 |
callback: function(result){ |
20 |
// result = String containing user input if OK clicked or null if Cancel clicked |
21 |
} |
22 |
}) |
6. Create a custom popup box.
1 |
bootbox.dialog({ |
2 |
message: 'HTML content here' |
3 |
}) |
7. Global options with default values.
01 |
bootbox.dialog({ |
02 |
03 |
// dialog message |
04 |
message: 'HTML content here', |
05 |
06 |
// title |
07 |
title: 'dialog title', |
08 |
09 |
// shows the dialog immediately |
10 |
show: true, |
11 |
12 |
// default language |
13 |
locale: 'en', |
14 |
15 |
// dialog container |
16 |
container: 'body', |
17 |
18 |
// default value (used by the prompt helper) |
19 |
value: '', |
20 |
21 |
// default input type (used by the prompt helper) |
22 |
inputType: 'text', |
23 |
24 |
// enables backdrop or not |
25 |
backdrop: null, |
26 |
27 |
// shows close button |
28 |
closeButton: true, |
29 |
30 |
// enables animations or not |
31 |
animate: true, |
32 |
33 |
// extra CSS class |
34 |
className: null, |
35 |
36 |
// dialog size |
37 |
size: 'small', |
38 |
39 |
// flips the order in which the buttons are rendered, from cancel/confirm to confirm/cancel |
40 |
swapButtonOrder: false, |
41 |
42 |
// adds the the modal-dialog-centered to the doalog |
43 |
centerVertical: false, |
44 |
45 |
// Append "multiple" property to the select when using the "prompt" helper |
46 |
multiple: false, |
47 |
48 |
// Automatically scroll modal content when height exceeds viewport height |
49 |
scrollable: false |
50 |
51 |
// dismisses the dialog by hitting ESC |
52 |
onEscape: true, |
