Examples

Currently viewing examples for version 4.x.

Bootbox is proudly sponsored by Finch. Test local websites across multiple devices, share them with your team and get feedback from clients through a secure, public URL.
meetfinch.com

The examples below attempt to demonstrate the myriad ways in which you can use Bootbox.js. Where functionality amongst the dialogs is nearly identical, the example will indicate to which functions the example applies.

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