Question

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

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

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

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

然后，使用“确定”或“取消”功能，如果他们选择了确定，则在那里进行呼叫以继续使用工作流程，或者只是隐藏并执行取消时需要取消的任何操作。

简而言之，模态对话框不会暂停执行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
            });

Answer 3

请在此处查看我的帖子：jQuery Deferred and Dialog box

这将模仿普通的JavaScript确认弹出窗口，但在jQuery中具有漂亮的样式。

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

3 个答案: