javascript - 带有布尔返回的 jQuery UI 对话框 - true 或 false

Question

我正在尝试替换javascript confirm()。我找到了可以完全自定义的 jquery dialog() 函数。问题是我不能让它返回true或false。

这是我的代码：

$('#delBox').dialog(
        { autoOpen: false, resizable: false, modal: true, closeOnEscape: true, width: 300, height: 'auto', title: 'Deletar registro',
            buttons: {
                "Ok": function () {
                    return true;
                }, "Cancelar": function () {
                    $(this).dialog("close");
                    return false;
                }
            },
            open: function () {
                var buttonsSet = $('.ui-dialog-buttonset').find("button:contains('Ok')");
                buttonsSet.attr("class", "ui-button ui-state-default");
                $('.ui-dialog-titlebar-close span').empty();
                $('.ui-dialog-buttonset').find("button:contains('Ok')").button({
                    text: false,
                    icons: {
                        primary: 'ui-icon-ok'
                    }
                });

                $('.ui-dialog-buttonset').find("button:contains('Cancelar')").button({
                    text: false, 
                    icons: {
                        primary: 'ui-icon-cancel'
                    }
                });
            }
        });

这仅在选择任何选项之前返回一个对象：

function deletar() {
     alert($('#delBox').dialog('open'));
}

Answer 1

jQueryUI 对话框不能返回true或false，因为它们显示在其他内容之上，但不会阻止执行。

你能做的最好的事情是：

1. 制作盒子modal，使其隐藏其他内容

2. 根据选择的选项提供要使用的回调。

对于额外的奖励积分，您可以创建一个$.Deferred()承诺对象并在显示对话框时返回它。resolve然后，您可以reject在按钮事件处理程序中做出承诺。

这将使您在显示对话框和执行随后由它触发的操作之间清晰分离：

function showDialog() {
   var def = $.Deferred();

   // create and/or show the dialog box here
   // but in "OK" do 'def.resolve()'
   // and in "cancel" do 'def.reject()'

   return def.promise();
}

showDialog().done(function() {
    // they pressed OK
}).fail(function() {
    // the pressed Cancel
});

// NB: execution will continue here immediately - you shouldn't do
//     anything else now - any subsequent operations need to be
//     started in the above callbacks.

Answer 2

第一个答案很好 - 我想我只是添加一些代码来展示如何返回被点击的按钮：

function ShowYesNoMessage(title, message) {
var def = $.Deferred();
$("#infoMessage").html(message);

$("#dialog_infoMessage").dialog({
    modal: true,
    title: title,
    buttons: {
        Yes: function () {
            $("#infoMessage").html("");
            $(this).dialog("close");
            def.resolve("Yes");
        },
        No: function () {
            $("#infoMessage").html("");
            $(this).dialog("close");
            def.resolve("No");
        }
    }
});
return def.promise();
}


$.when(ShowYesNoMessage("Are you sure", message)).then(
            function(status) {
                if (status == "Yes") {
                    //do the next step
                }
            }
        );