Bootbox is a small bootstrap modal jquery plugin to create a warning, confirmation, and flexible dialog box using a Twitter bootstrap framework.
Currently works with the latest Bootstrap 5, Bootstrap 4, and Bootstrap 3 frameworks.
 |
| Bootstrap Modal |
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)
How to use it:
1. Include jQuery Library and the Bootbox.js plugin files.
<script src="/path/to/jquery.min.js"></script> <!-- Bootbox Without Locals --> <script src="dist/bootbox.min.js"></script> <!-- Locals --> <script src="dist/bootbox.locales.min.js"></script> <!-- Bootbox With Locals --> <script src="dist/bootbox.all.min.js"></script>
2. Include the latest Bootstrap framework.
<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!", function(){
// optional callback
});
// 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 a prompt 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 custom popup box.
bootbox.dialog({
message: 'HTML content here',
// more options 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(){},
// the element that triggered the dialog opening
relatedTarget: null,
})
8. The plugin also supports more than 42 locals.
- 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
- vi Vietnamese
- zh-CN Chinese (People's Republic of China)
- zh-TW Chinese (Taiwan / Republic of China)
bootbox.dialog({
locale: 'en'
})
9. Determine if the popup box is reusable. Default: false.
bootbox.dialog({
// whether or not to destroy the modal on hide
reusable: false
})
10. API methods.
// 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();
Live Demo
See the Pen Bootstrap Modal With Plugin Bootbox by Plugin JS (@pluginjs) on CodePen.
File Info
- File Name :
- bootstrap-modal-with-plugin-bootbox.zip
- Size :
- 8.64KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT