jQuery 模态对话框不会停止用户输入

Question

我是 jQuery 新手，但已经使用 jqueryUI 对话框小部件成功实现了几个模式对话框。在尝试实现另一个时，模态对话框打开，但代码继续执行而不停止用户输入。使用 jQuery 1.7.1 和 jquery-ui-1.8.16。

这里是对话框“原型”的定义（它是“原型”，因为它不采取满足要求所需的“确定”选择操作）：

var $confirm = $('#confirm');
$confirm.dialog(
{
    autoOpen:false,
    width:440,
    modal:true,
    buttons:
    {
        OK: function()
        {
            $( this ).dialog( 'close' );
        },
        Cancel: function()
        {
            $( this ).dialog( 'close' );
        }
    }
});

下面是一些打开对话框的测试代码：

[ some javascript that does error checking]
alert('stop1');
$('#confirm').dialog('open');
alert('stop2');
[ more javascript including submitting the form]

会发生第一个警报显示。单击它后，对话框与第二个警报一起打开，表明该对话框不等待用户输入。第二个警报是模态的，阻止访问对话框。当它被点击时，表单提交。这个序列表明对话框没有等待用户输入。

我已经查看并查看了其他成功实现的模式对话框，但没有看到可能导致此对话框失败的原因。

Answer 1

对话框不会等待。相反，你会想以此为点来决定你想要发生什么。因此，不要在对话框模式之后包含您可能希望或可能不希望运行的其他代码，而是让它成为函数的最后一部分。

然后，使用您的 OK 或 Cancel 函数，在那里调用以继续工作流程（如果他们选择了 ok），或者只是隐藏并执行取消操作需要执行的任何取消操作。

简而言之，模态对话框不会暂停 javascript 的执行，它只会运行代码以打开模态并继续运行。

Answer 2

你应该使用一个承诺：

function deferredConfirm(message) {

$('<div></div>').html(message).dialog({
    dialogClass: 'confirmDialog',
    buttons:
    [{
        text: buttonText,
        click: function () {
            $(this).dialog("close");
            defer.resolve();
        }
    },
    {
        text: buttonText2,
        click: function () {
            $(this).dialog("close");
            defer.reject();
        }
    }],
    close: function () {
        $(this).remove();
    }
});

    return defer.promise();
}

并称它为：

            deferredConfirm("Oh No!").then(function() {
               //do something if dialog confirmed
            });