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
|
1 |
bootbox.alert("Hello world!"); |
Compare to Generate Same Modal with Bootstrap Code
|
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 |
<!-- 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
|
1 |
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
|
1 |
bootbox.alert("This is the default alert!"); |
Small Alert
|
1 2 3 4 |
bootbox.alert({ message: "This is the small alert!", size: 'small' }); |
Large Dialog Alert
|
1 2 3 4 |
bootbox.alert({ message: "This is the large alert!", size: 'large' }); |
Custom CSS Dialog Alert
|
1 2 3 4 |
bootbox.alert({ message: "This is an alert with additional classes!", className: 'rubberBand animated' }); |
Locale Dialog Alert
|
1 2 3 4 |
bootbox.alert({ message: "This alert uses the Arabic locale!", locale: 'ar' }); |
Confirm Dialog Alert
|
1 2 3 |
bootbox.confirm("This is the default confirm!", function(result){ console.log('This was logged in the callback: ' + result); }); |
Custom Color Dialog Alert
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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
|
1 2 3 |
bootbox.prompt("This is the default prompt!", function(result){ console.log(result); }); |
Checkbox Dialog Alert
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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
|
1 2 3 4 5 6 7 |
bootbox.prompt({ title: "This is a prompt with a date input!", inputType: 'date', callback: function (result) { console.log(result); } }); |
Email Prompt Dialog Alert
|
1 2 3 4 5 6 7 |
bootbox.prompt({ title: "This is a prompt with an email input!", inputType: 'email', callback: function (result) { console.log(result); } }); |
Number Input Dialog Alert
|
1 2 3 4 5 6 7 |
bootbox.prompt({ title: "This is a prompt with a number input!", inputType: 'number', callback: function (result) { console.log(result); } }); |
Password Input Dialog Alert
|
1 2 3 4 5 6 7 |
bootbox.prompt({ title: "This is a prompt with a password input!", inputType: 'password', callback: function (result) { console.log(result); } }); |
Select Input Dialog Alert
|
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 |
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
|
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 |
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
|
1 2 3 4 5 6 7 |
bootbox.prompt({ title: "This is a prompt with a textarea!", inputType: 'textarea', callback: function (result) { console.log(result); } }); |
Time Input Dialog Alert
|
1 2 3 4 5 6 7 |
bootbox.prompt({ title: "This is a prompt with a time input!", inputType: 'time', callback: function (result) { console.log(result); } }); |
Range Input Dialog Alert
|
1 2 3 4 5 6 7 8 9 10 11 |
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); } }); |
