javascript - JavaScript 对话框弹出事件等待确定被按下

Question

我有一个删除（输入提交）按钮，单击时会弹出一个对话框（Alloy UI 对话框，html）：

A.all("#RFB input.ConfirmDelete").each(function(node){
    node.on('click', function(event) {      

        if(confirmed) {
            showUserWaitDialog();
            return true;
        }
        else {
            deactivateKeyboardNav();
            deleteConfirm(node, confirmDeleteMessage, function () { //Runs the function rendering the pop up
                confirmed = true;
                event.target.click();
                showUserWaitDialog();
            });
        }
    });
});

问题是event正在运行异步并因此执行删除，而不是等待用户单击确定（调用回调）。

deleteConfirm 采用以下参数

function deleteConfirm(link, pText, callback) {

弹出窗口中的内容包括：

var bodyContent = '<div class="vl-info vl-message"><h2>'+titleText+'</h2>'+
                        '<p>'+pText+'</p>' +
                        '<p class="more button-area"><a href="#" class="deleteOK">'+confirmButtonText+'</a><a href="#" class="deleteNotOK">'+discardButtonText+'</a></p></div>';

和按钮功能：

A.one('.deleteOK').on('click', function(e){
                            (jQuery.isFunction(callback)) && callback.apply();
                            confirmDialog.close();
                            confirmDialogOpen = false;
                        });

                        A.one('.deleteNotOK').on('click', function(e){
                            confirmDialog.close();
                            confirmDialogOpen = false;
                            return false;
                        });

我应该如何处理这个？

Answer 1

Alloy UI 提供了一个不错的对话框 API。可能值得查看此示例并申请您的要求。

var dialog = new A.Dialog({
                title : '<your dialog box title here>',
                centered: true,
                modal: false,
                width: 600,
                height: 250,
                bodyContent: <You can keep the message to display here>,
                buttons: [
                          {
                              label: 'Delete',
                              id: 'deleteBtn',
                              handler: function() {
                                 //Place code to delete here. It get executed when user click on Delete button.
                              }
                          },
                          {
                              label: 'Cancel',
                              id: 'cancelActionItemBtn',
                              handler: function() {
                                  this.close();
                              }
                          }
                          ]
            }).render();