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

這是一個基於您的代碼的示例，它使用超時來模擬 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

如果您想在后台進程完成后自動關閉對話框，覆蓋示例幾乎就是這樣做的：

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