以下示例试图说明使用Bootbox的多种方法。

基本用法

bootbox.alert("This is the default alert!");
基本用法,带回调

bootbox.alert("This is an alert with a callback!", function(){ 
    console.log('This was logged in the callback!'); 
});
基本用法,使用options对象

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

也适用于:Confirm, Prompt, Custom

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

需要Bootstrap 3.1.0或更高版本。

大对话框

也适用于:Confirm, Prompt, Custom

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

需要Bootstrap 3.1.0或更高版本。

自定义CSS类 (使用 Animate.css)

也适用于: Confirm, Prompt, Custom

bootbox.alert({
    message: "This is an alert with additional classes!",
    className: 'rubberBand animated'
});
用重叠点击关闭

也适用于: Confirm, Prompt, Custom

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

也适用于:Confirm, Prompt, Custom

bootbox.alert({
    message: "This alert uses the Arabic locale!",
    locale: 'ar'
});
基本用法

bootbox.confirm("This is the default confirm!", function(result){ 
    console.log('This was logged in the callback: ' + result); 
});
带有备用按钮的文字和颜色

也适用于:Alert, Prompt, Custom

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);
    }
});
带有图标和按钮的文字

也适用于:Alert, Prompt, Custom

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);
    }
});
演示所有语言环境

也适用于:Alert, Prompt, Custom

var locale = $('#locales').val();
            
bootbox.confirm({
    message: "This confirm uses the selected locale. Were the labels what you expected?",
    locale: locale,
    callback: function (result) {
        console.log('This was logged in the callback: ' + result);
    }
});

请注意: 提示需要 title 选项(使用options对象时)。您可以使用该message 选项,但是提示结果将不包含来自消息的任何表单输入。

基本用法

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

如果要设置输入的样式,则可以定位.bootbox-input-text 类。

垂直居中

bootbox.prompt({
    title: "This is a prompt, vertically centered!", 
    centerVertical: true,
    callback: function(result){ 
        console.log(result); 
    }
});
使用自定义语言环境

var locale = {
    OK: 'I Suppose',
    CONFIRM: 'Go Ahead',
    CANCEL: 'Maybe Not'
};
            
bootbox.addLocale('custom', locale);
            
bootbox.prompt({ 
    title: "This is a prompt with a custom locale! What do you think?", 
    locale: 'custom',
    callback: function (result) {
        console.log('This was logged in the callback: ' + result);
    }
});
提示复选框

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

复选框嵌套在带有类的元素中.bootbox-checkbox-list。如果要设置各个复选框输入的样式,则可以定位.bootbox-input-checkbox该类。

提示单选按钮和一个message

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

单选按钮与class嵌套在一个元素中.bootbox-radiobutton-list. 。如果要设置各个无线电输入的样式,则可以定位.bootbox-input-radio 该类。

使用该radio选项时,将检查第一个单选按钮是否value丢失或与inputOptions 值不匹配。

提示日期

需要浏览器支持:https://caniuse.com/#feat=input-datetime

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

如果要设置输入的样式,则可以定位.bootbox-input-date类。

提示电子邮件

需要浏览器支持:https://caniuse.com/#feat=email

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

如果要设置输入的样式,则可以定位.bootbox-input-email 类.

带数字提示

需要浏览器支持:https://caniuse.com/#feat=input-number

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

如果要设置输入的样式,则可以定位.bootbox-input-number 类。

提示输入密码

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

如果要设置输入的样式,则可以定位.bootbox-input-password类。

选择提示

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

如果要设置选择的样式,则可以定位 .bootbox-input-select 类。

选择并多次提示

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

如果要设置选择的样式,则可以定位 .bootbox-input-select 该类。

提示文本区域

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

如果要设置文本区域的样式,则可以定位 .bootbox-input-textarea 该类。

及时提示

需要浏览器支持:https://caniuse.com/#feat=input-datetime

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

如果要设置输入的样式,则可以定位.bootbox-input-time 该类.

提示范围

需要浏览器支持:https://caniuse.com/#feat=input-range

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

如果要设置输入的样式,则可以定位.bootbox-input-range 该类.

请注意: 自定义对话框仅接受一个参数:选项对象。options对象的唯一必需属性是message.

自定义对话框作为“正在加载”叠加层

var dialog = bootbox.dialog({
    message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Please wait while we do something...</p>',
    closeButton: false
});
            
// do something in the background
dialog.modal('hide');
使用init的自定义对话框

也适用于:Alert, Confirm, Prompt

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);
});
自定义对话框,带有按钮和回调

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>",
    size: 'large',
    buttons: {
        cancel: {
            label: "I'm a cancel button!",
            className: 'btn-danger',
            callback: function(){
                console.log('Custom cancel clicked');
            }
        },
        noclose: {
            label: "I don't close the modal!",
            className: 'btn-warning',
            callback: function(){
                console.log('Custom button clicked');
                return false;
            }
        },
        ok: {
            label: "I'm an OK button!",
            className: 'btn-info',
            callback: function(){
                console.log('Custom OK clicked');
            }
        }
    }
});