Question

我需要创建一个没有任何外部库的自定义确认对话框。原因是更少的代码，我想按自己的喜好设计样式。

提琴：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();
       }
    });

}

jQuery-自定义确认对话框

1 个答案: