javascript jQuery 模态对话框不会因用户输入而停止
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8865738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery modal dialog does not stop for user input
提问by Jeffrey Simon
I am new to jQuery but have already implemented successfully several modal dialogs using the jqueryUI dialog widget. In trying to implement another one, the modal dialog opens, but the code continues on to execute without stopping for user input. Using jQuery 1.7.1 and jquery-ui-1.8.16.
我是 jQuery 的新手,但已经使用 jqueryUI 对话框小部件成功实现了几个模态对话框。在尝试实现另一个对话框时,模态对话框打开,但代码继续执行而不会停止用户输入。使用 jQuery 1.7.1 和 jquery-ui-1.8.16。
Here is the definition of a "prototype" of the dialog (it is a "prototype" because it doesn't take the actions on the "OK" selection that would be needed to meet requirements):
这是对话框的“原型”的定义(它是“原型”,因为它不会对满足要求所需的“确定”选择采取行动):
var $confirm = $('#confirm');
$confirm.dialog(
{
autoOpen:false,
width:440,
modal:true,
buttons:
{
OK: function()
{
$( this ).dialog( 'close' );
},
Cancel: function()
{
$( this ).dialog( 'close' );
}
}
});
Here is some test code that opens the dialog:
这是一些打开对话框的测试代码:
[ some javascript that does error checking]
alert('stop1');
$('#confirm').dialog('open');
alert('stop2');
[ more javascript including submitting the form]
What happens is the the first alert displays. Upon clicking on it the dialog opens along with the second alert, indicating that the dialog is not waiting for user input. The second alert is modal and prevents the dialog from being accessed. When it is clicked on, the form submits. This sequence shows that the dialog is not waiting for user input.
发生的是第一个警报显示。单击它后,对话框与第二个警报一起打开,表明该对话框没有等待用户输入。第二个警报是模态的,可防止访问对话框。当它被点击时,表单提交。此序列显示对话框不等待用户输入。
I have looked and looked at my other successfully implemented modal dialogs and do not see what might be causing this one to fail.
我已经查看并查看了我其他成功实现的模式对话框,但没有看到可能导致此对话框失败的原因。
采纳答案by ryanmarc
The dialog won't wait. Instead you'll want to use this as a point to decide what you want to happen. So instead of including additional code that you may or may not want to run after the dialog modal, let that be the last part of the function.
对话框不会等待。相反,您会希望以此为点来决定您想要发生的事情。因此,与其包含您可能希望或不想在对话框模式之后运行的附加代码,不如让它成为函数的最后一部分。
Then, with your OK or Cancel functions, make the call there to continue on with the workflow if they chose ok, or just hide and do whatever cancel stuff needs to be done with the cancel.
然后,使用您的 OK 或 Cancel 功能,如果他们选择了 OK,则在那里进行调用以继续工作流程,或者只是隐藏并执行任何需要使用取消完成的取消操作。
In short, the modal dialog will not pause execution of the javascript, it will just run the code to open the modal and keep on going.
简而言之,模态对话框不会暂停 javascript 的执行,它只会运行代码来打开模态并继续运行。
回答by Emjaycobs
You should use a promise:
你应该使用一个承诺:
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();
}
And to call it:
并称之为:
deferredConfirm("Oh No!").then(function() {
//do something if dialog confirmed
});