jQuery-自定義確認對話框

Question

我需要創建一個沒有任何外部庫的自定義確認對話框。 原因是，更少的代碼，我想按照自己的喜好設計樣式。

小提琴： https://jsfiddle.net/j4hmdy17/ : https://jsfiddle.net/j4hmdy17/

我的代碼有問題：

if( my_confirm() ) {
    console.log( 'Process ajax!' );
}

單擊對話框確認框按鈕“是”時，條件不返回true。

碼：

if( my_confirm() ) {
    console.log( 'Process ajax!' );
}

function my_confirm() {

var dialog = '<div id="confirm-dialog" class="confirm-dialog-open">';
        dialog += '<div class="confirm-dialog">';
            dialog += '<div class="confirm-dialog-container">';
                    dialog += '<div class="confirm-dialog-header">';
                        dialog += '<div class="confirm-heading">Are you sure?</div>';
                    dialog += '</div>';

                    dialog += '<div class="confirm-dialog-footer">';
                        dialog += '<button class="confirm-cancel">No</button>';
                        dialog += '<button class="confirm-success">Yes</button>';
                    dialog += '</div>';
            dialog += '</div>';
        dialog += '</div>';
    dialog += '</div>';

jQuery( '#dialog_container' ).html( dialog );
jQuery( document ).on( 'click', '#confirm-dialog .confirm-success', function() {
    return true;
});

return false;

}

任何人？

Answer 1

本機confirm功能（例如alert ）正在阻止，並阻止任何進一步的腳本執行或頁面交互，直到用戶響應提示為止。 這與您可以在GUI中編寫的任何內容均不等同。

您將需要使您的自定義確認功能適應回調驅動。

my_confirm(function() {
   alert('Process ajax!');
});

function my_confirm(confirmCallback, cancelCallback) {
    // your confirm dialog

    jQuery( document ).on( 'click', '#confirm-dialog .confirm-success', function() {
       if(typeof confirmCallback === 'function') {
           confirmCallback();
       }
    });

}