Examples

Documentation |

Basic usage

bootbox.alert("This is the default alert!");

Basic usage, with callback

bootbox.alert("This is an alert with a callback!", function(){ console.log('This was logged in the callback!'); });

Basic usage, using options object

bootbox.alert({
    message: "This is an alert with a callback!",
    callback: function () {
        console.log('This was logged in the callback!');
    }
})

Also applies to: Confirm, Prompt, Custom Small dialog

bootbox.alert({
    message: "This is the small alert!",
    size: 'small'
});

Also applies to: Confirm, Prompt, Custom Large dialog

bootbox.alert({
    message: "This is the large alert!",
    size: 'large'
});

Also applies to: Confirm, Prompt, Custom Custom CSS class

bootbox.alert({
    message: "This is an alert with an additional class!",
    className: 'bb-alternate-modal'
});

Also applies to: Confirm, Prompt, Custom Dismiss with overlay click

bootbox.alert({
    message: "This alert can be dismissed by clicking on the background!",
    backdrop: true
});

Documentation |

Basic usage

bootbox.confirm("This is the default confirm!", function(result){ console.log('This was logged in the callback: ' + result); });

Also applies to: Alert, Prompt, Custom With alternate button text and color

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

Also applies to: Alert, Prompt, Custom With icon and button text

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

Documentation |

Please note: prompt requires the title option (when using the options object) and disallows the message option.

Basic usage

bootbox.prompt("This is the default prompt!", function(result){ console.log(result); });

Prompt with checkbox

bootbox.prompt({
    title: "This is a prompt with a set of checkbox inputs!",
    inputType: 'checkbox',
    inputOptions: [
        {
            text: 'Choice One',
            value: '1',
        },
        {
            text: 'Choice Two',
            value: '2',
        },
        {
            text: 'Choice Three',
            value: '3',
        }
    ],
    callback: function (result) {
        console.log(result);
    }
});

Requires browser support: http://caniuse.com/#feat=input-datetime Prompt with date

bootbox.prompt({
    title: "This is a prompt with a date input!",
    inputType: 'date',
    callback: function (result) {
        console.log(result);
    }
});

Requires browser support: http://caniuse.com/#feat=email Prompt with email

bootbox.prompt({
    title: "This is a prompt with an email input!",
    inputType: 'email',
    callback: function (result) {
        console.log(result);
    }
});

Requires browser support: http://caniuse.com/#feat=input-number Prompt with number

bootbox.prompt({
    title: "This is a prompt with a number input!",
    inputType: 'number',
    callback: function (result) {
        console.log(result);
    }
});

Prompt with password

bootbox.prompt({
    title: "This is a prompt with a password input!",
    inputType: 'password',
    callback: function (result) {
        console.log(result);
    }
});

Prompt with select

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

Prompt with textarea

bootbox.prompt({
    title: "This is a prompt with a textarea!",
    inputType: 'textarea',
    callback: function (result) {
        console.log(result);
    }
});

Requires browser support: http://caniuse.com/#feat=input-datetime Prompt with time

bootbox.prompt({
    title: "This is a prompt with a time input!",
    inputType: 'time',
    callback: function (result) {
        console.log(result);
    }
});

Documentation |

Please note: Custom dialogs accept only one argument: an options object. The only required property of the options object is message.

Custom dialog as "loading" overlay

var dialog = bootbox.dialog({
    message: '<p class="text-center">Please wait while we do something...</p>',
    closeButton: false
});
// do something in the background
dialog.modal('hide');

Also applies to: Alert, Confirm, Prompt Custom dialog, using init

var dialog = bootbox.dialog({
    title: 'A custom dialog with init',
    message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
});
dialog.init(function(){
    setTimeout(function(){
        dialog.find('.bootbox-body').html('I was loaded after the dialog was shown!');
    }, 3000);
});

Custom dialog, with buttons and button callbacks

var dialog = bootbox.dialog({
title: 'A custom dialog with buttons and callbacks',
message: "<p>This dialog has buttons. Each button has it's own callback function.</p>",
buttons: {
    cancel: {
        label: "I'm a custom cancel button!",
        className: 'btn-danger',
        callback: function(){
            Example.show('Custom cancel clicked');
        }
    },
    noclose: {
        label: "I'm a custom button, but I don't close the modal!",
        className: 'btn-warning',
        callback: function(){
            Example.show('Custom button clicked');
            return false;
        }
    },
    ok: {
        label: "I'm a custom OK button!",
        className: 'btn-info',
        callback: function(){
            Example.show('Custom OK clicked');
        }
    }
}
});

Alert

Confirm

Prompt

Custom Dialogs