BootBoxJS – Bootstrap Modals Library For Creating Beautiful Bootstrap Modals
By Welcome Folks I am back with Another blog post. In this post we will be talking about BootBoxJS – An Awesome library for generating Bootstrap type modals with single line of code. In this post you will see how to download and use this library and an unlimited examples of this library. Let get started with the post.
BootBox Modal Demo
bootbox.alert("Hello world!");
Compare to Generate Same Modal with Bootstrap Code
<!-- set up the modal to start hidden and fade in and out -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- dialog body -->
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
Hello world!
</div>
<!-- dialog buttons -->
<div class="modal-footer"><button type="button" class="btn btn-primary">OK</button></div>
</div>
</div>
</div>
<!-- sometime later, probably inside your on load event callback -->
<script>
$("#myModal").on("show", function() { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function(e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
});
$("#myModal").on("hide", function() { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
});
$("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop" : "static",
"keyboard" : true,
"show" : true // ensure the modal is shown immediately
});
</script>
Getting Started
Via NPM
npm i bootbox
Direct Download
BootBox.js
BootBox.locales.js
BootBox.min.js
BootBox.locales.min.js
BootBox.all.min.js
Usage
Examples
Default Alert
bootbox.alert("This is the default alert!");
Small Alert
bootbox.alert({
message: "This is the small alert!",
size: 'small'
});
Large Dialog Alert
bootbox.alert({
message: "This is the large alert!",
size: 'large'
});
Custom CSS Dialog Alert
bootbox.alert({
message: "This is an alert with additional classes!",
className: 'rubberBand animated'
});
Locale Dialog Alert
bootbox.alert({
message: "This alert uses the Arabic locale!",
locale: 'ar'
});
Confirm Dialog Alert
bootbox.confirm("This is the default confirm!", function(result){
console.log('This was logged in the callback: ' + result);
});
Custom Color Dialog Alert
bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
console.log('This was logged in the callback: ' + result);
}
});
Icon Dialog Alert
bootbox.confirm({
title: "Destroy planet?",
message: "Do you want to activate the Deathstar now? This cannot be undone.",
buttons: {
cancel: {
label: '<i class="fa fa-times"></i> Cancel'
},
confirm: {
label: '<i class="fa fa-check"></i> Confirm'
}
},
callback: function (result) {
console.log('This was logged in the callback: ' + result);
}
});
Input Dialog Alert
bootbox.prompt("This is the default prompt!", function(result){
console.log(result);
});
Checkbox Dialog Alert
bootbox.prompt({
title: "This is a prompt with a set of checkbox inputs!",
value: ['1', '3'],
inputType: 'checkbox',
inputOptions: [{
text: 'Choice One',
value: '1',
},
{
text: 'Choice Two',
value: '2',
},
{
text: 'Choice Three',
value: '3',
}],
callback: function (result) {
console.log(result);
}
});
RadioBox Dialog Alert
bootbox.prompt({
title: "This is a prompt with a set of radio inputs!",
message: '<p>Please select an option below:</p>',
inputType: 'radio',
inputOptions: [
{
text: 'Choice One',
value: '1',
},
{
text: 'Choice Two',
value: '2',
},
{
text: 'Choice Three',
value: '3',
}
],
callback: function (result) {
console.log(result);
}
});
Date Prompt Dialog Alert
bootbox.prompt({
title: "This is a prompt with a date input!",
inputType: 'date',
callback: function (result) {
console.log(result);
}
});
Email Prompt Dialog Alert
bootbox.prompt({
title: "This is a prompt with an email input!",
inputType: 'email',
callback: function (result) {
console.log(result);
}
});
Number Input Dialog Alert
bootbox.prompt({
title: "This is a prompt with a number input!",
inputType: 'number',
callback: function (result) {
console.log(result);
}
});
Password Input Dialog Alert
bootbox.prompt({
title: "This is a prompt with a password input!",
inputType: 'password',
callback: function (result) {
console.log(result);
}
});
Select Input Dialog Alert
bootbox.prompt({
title: "This is a prompt with select!",
inputType: 'select',
inputOptions: [
{
text: 'Choose one...',
value: '',
},
{
text: 'Choice One',
value: '1',
},
{
text: 'Choice Two',
value: '2',
},
{
text: 'Choice Three',
value: '3',
}
],
callback: function (result) {
console.log(result);
}
});
Multiple Select Input Dialog Alert
bootbox.prompt({
title: "This is a prompt with a multi-select!",
inputType: 'select',
multiple: true,
value: ['1','3'],
inputOptions: [
{
text: 'Choose one...',
value: '',
},
{
text: 'Choice One',
value: '1',
},
{
text: 'Choice Two',
value: '2',
},
{
text: 'Choice Three',
value: '3',
}
],
callback: function (result) {
console.log(result);
}
});
TextArea Input Dialog Alert
bootbox.prompt({
title: "This is a prompt with a textarea!",
inputType: 'textarea',
callback: function (result) {
console.log(result);
}
});
Time Input Dialog Alert
bootbox.prompt({
title: "This is a prompt with a time input!",
inputType: 'time',
callback: function (result) {
console.log(result);
}
});
Range Input Dialog Alert
bootbox.prompt({
title: "This is a prompt with a range input!",
inputType: 'range',
min: 0,
max: 100,
step: 5,
value: 35,
callback: function (result) {
console.log('This was logged in the callback: ' + result);
}
});
