Bootbox - 如何动态添加按钮？答案

【问题标题】：Bootbox - how to dynamically add a button?Bootbox - 如何动态添加按钮？
【发布时间】：2020-02-13 13:16:59
【问题描述】：

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

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

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

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

【问题讨论】：

由于您已经创建了对 Bootbox 对话框的引用，因此您可以使用 dialog.find('.bootbox-body') 之类的方式访问模式的“内容”——除此之外您所做的取决于您如何配置我假设是一个 AJAX 请求。

标签： javascript alert bootbox

【解决方案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);

【讨论】：