Bootbox-如何动态添加按钮？

Question

用户提交表单后，将弹出一条警告消息，提示“这可能需要一分钟...”

然后，完成后端作业后，消息文本应更改为“完成”，并应显示“确定”按钮。

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

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按钮的类为.bootbox-accept，我们可以将其用作目标。所有分配给message选项的内容都放在带有.bootbox-body类的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);