在选择答案之前返回对话框

时间:2013-02-22 10:05:58

标签: javascript jquery

我弹出一个对话框,询问用户一个问题,这个功能如下:

function confirmBox2(action) {

    var message = "";

    if (action == "Quit") {

        message = "Are you sure you want to quit without saving?";

    }
    else if (action == "Delete") {

        message = "Confirm you want to Delete?";

    }
    else if (action == "Save") {

        message = "Are you sure you want to Save Changes?";

    }


    $('body').append('<div id="dialog-box" style="display:none;">' + message + '</div>');

    $('#dialog-box').dialog({
        modal: true,
        buttons: {
            Yes: function () {

                $(this).dialog("close");
                $('#dialog-box').remove();

                return true;
                //history.back(-1);

            },
            NO: function () {
                $(this).dialog("close");
                $('#dialog-box').remove();

                return false;

            }
        }
    });
}

您将看到Yes返回true,No返回false。我希望能够做类似

的事情
if(confirmBox2("Quit")){

    // do something here
}

我遇到的问题是代码是异步运行而不是等待选择对话框的答案,我该如何解决这个问题?

由于

1 个答案:

答案 0 :(得分:1)

我修改了确认功能以接受另外2个参数。其中一个是单击“是”时要调用的函数的名称,另一个是单击“否”时要调用的函数的名称。您之前的版本是打开对话框,然后立即结束该功能,因为对话框调用不是阻塞或同步调用,因此该函数不会等到您在返回之前关闭对话框。这就是你没有得到结果的原因。使用此方法,您可以创建一个函数来处理“是”单击,这是一个处理“无”单击的函数,您可以在单击相应按钮时调用它们。

function confirmBox2(Action, YesCallback, NoCallback) {
    var message = "";
    if (Action == "Quit") {
        message = "Are you sure you want to quit without saving?";
    } else if (Action == "Delete") {
        message = "Confirm you want to Delete?";
    } else if (Action == "Save") {
        message = "Are you sure you want to Save Changes?";
    }

    $('body').append('<div id="dialog-box" style="display:none;">' + message + '</div>');

    $('#dialog-box').dialog({
        modal: true,
        buttons: {
            "Yes" : function () {
                $(this).dialog("close");
                $('#dialog-box').remove();
                YesCallback();
            },
            "No" : function () {
                $(this).dialog("close");
                $('#dialog-box').remove();
                NoCallback();
            }
        }
    });
}

function onDialogYes() {
    // handle the "yes" click here
}

function onDialogNo() {
    // handle the "no" click here
}

confirmBox2("Quit", onDialogYes, onDialogNo);

您可以选择不将回调函数作为参数传递,例如......

function confirmBox2(Action) {
    var message = "";
    if (Action == "Quit") {
        message = "Are you sure you want to quit without saving?";
    } else if (Action == "Delete") {
        message = "Confirm you want to Delete?";
    } else if (Action == "Save") {
        message = "Are you sure you want to Save Changes?";
    }

    $('body').append('<div id="dialog-box" style="display:none;">' + message + '</div>');

    $('#dialog-box').dialog({
        modal: true,
        buttons: {
            "Yes" : function () {
                $(this).dialog("close");
                $('#dialog-box').remove();
                onDialogYes();
            },
            "No" : function () {
                $(this).dialog("close");
                $('#dialog-box').remove();
                onDialogNo();
            }
        }
    });
}

function onDialogYes() {
    // handle the "yes" click here
}

function onDialogNo() {
    // handle the "no" click here
}

confirmBox2("Quit");

您可能希望将Action传递给按钮的事件处理程序,以便您知道正在处理的操作。