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，因为它们显示在其他内容之上，但没有阻止执行。

你能做的最好的事情是：

将框modal设为隐藏其他内容
根据选择的选项提供要使用的回调。

对于额外奖励积分，您可以创建一个$.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
                }
            }
        );

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

2 个答案: