BootBoxJS – Bootstrap Modals Library For Creating Beautiful Bootstrap Modals

BootBoxJS – Bootstrap Modals Library For Creating Beautiful Bootstrap Modals

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>

 

READ  What is AJAX? How it Works Short Explanation | Tutorial for Beginners

 

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);
    }
});

 

READ  Firebase Authentication in Facebook using Javascript - Coding Shiksha

 

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);
    }
});

 

READ  Login with Google Account using Javascript

 

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);
    }
});

 

 

Leave a Reply