Bootbox

Question

用户提交表单后，应弹出一条警告消息并显示 "This might take up to a minute..."

然后，后端作业完成后，消息文本应更改为 'Done' 并应显示 'OK' 按钮。

我可以创建一个带有按钮的对话框，但我不确定如何动态添加它？

dialog = bootbox.alert({
        title: 'This might take up to a minute, please wait.',
        message: '<p><i class="fa fa-spin fa-spinner"></i> Submitting...</p>',
        centerVertical: true,
        backdrop: true,
        size: 'large',
        callback: function() {

        }
    }

)

我该如何实施？我需要创建一个新对话框还是重写现有对话框？

Bootbox.js

Answer 1

Here's an example based on your code，它使用超时来模拟 AJAX 调用：

$(function(){
    let dialog = bootbox.alert({
      title: 'This might take up to a minute, please wait.',
      message: '<p><i class="fa fa-spin fa-spinner"></i> Submitting...</p>',
      centerVertical: true,
      size: 'large',
      closeButton: false,
      buttons: {
        ok: {
          className: 'btn-primary disabled'
        }
      },
      callback: function() {

      }
    });

    setTimeout(function(){ 
        dialog.find('.bootbox-body').html('<p>Done!</p>');
        dialog.find('.bootbox-accept').removeClass('disabled');
    }, 5000);
});

假设您使用的是 bootbox.alert 助手而不是自定义对话框，OK 按钮有 class .bootbox-accept，我们可以将其用作目标。分配给 message 选项的所有内容都放在带有 .bootbox-body class 的 div 中，我们可以再次定位。

这与 .init() 示例的大部分过程相同：http://bootboxjs.com/examples.html#custom-dialog-init

如果您想在后台进程完成后自动关闭对话框，overlay example 几乎可以做到这一点：

let timeout = 3000; // 3 seconds
let dialog = bootbox.dialog({
    message: '<p class="text-center mb-0">Please wait while we do something...</p>',
    closeButton: false
});

setTimeout(function () {
    dialog.modal('hide');
}, timeout);

Bootbox - 如何动态添加按钮？

Bootbox - how to dynamically add a button?

javascript

alert