Bootbox.js实例 - 我爱模板网 www.5imoban.net

bootboxjs在线文档 |

基本用法

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

带对象传参的基本用法

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

也适用于: Confirm, Prompt, Custom 大对话框

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

也适用于: Confirm, Prompt, Custom 自定义class样式

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

也适用于: Confirm, Prompt, Custom 点击遮罩层隐藏对话框

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

文档 |

基本用法

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 按钮带小图标（需要使用font awesome，本案例没有引入font awesome，所以无法显示图标）

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 |

请注意: prompt 必须要 title 参数 (当传递参数时) 并且不能用 message 参数。

基本用法

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

带checkbox的Prompt

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

必须支持: http://caniuse.com/#feat=input-datetime 带选择时间功能的input框的Prompt

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

必须支持: http://caniuse.com/#feat=email 带email的

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

必须支持: http://caniuse.com/#feat=input-number 带number的Prompt

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

必须支持: 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);
    }
});

文档 |

请注意: 自定义对话框仅支持一个数组形式的参数。唯一的必要参数就是 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');

也适用于: 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);
});