如何使用 jquery UI 对话框作为 javascript 确认？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3844241/
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
how to use jquery UI dialog as javascript confirm?
提问by Alex Angelico
I read lots of questions about this, but every solution uses the same workaround, submiting the form inside the jquery dialog, something like this:
我阅读了很多关于此的问题，但每个解决方案都使用相同的解决方法，在 jquery 对话框中提交表单，如下所示：
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
Isn't there an easier way, more like javascript confirm?
没有更简单的方法，更像是 javascript 确认吗？
<input type="submit" onclick="return confirm('are you sure?');" />
Why something like return true, return false doesn't work?
为什么像 return true, return false 这样的东西不起作用？
回答by Arturo Molina
Here's what you can do, you change your input type from 'submit' to 'button', then, you can have your script like this:
这是您可以执行的操作，将输入类型从“提交”更改为“按钮”，然后，您的脚本可以是这样的：
$(document).ready(function(){
$("#dialog").dialog({
autoOpen: false,
buttons : {
"Confirm" : function() {
$('#form1').submit();
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$('#submitButton').click(function(){
$("#dialog").dialog('open');
});
});
This way your form will only be submitted when the used confirms the dialog.
这样您的表单只会在用户确认对话框时提交。
The reason it doesn't matter if you return false or true in your case is that the dialog is just shown but code from the submit event keeps on executing unless you return false just after showing the dialog.
在您的情况下返回 false 或 true 无关紧要的原因是对话框刚刚显示，但提交事件中的代码继续执行，除非您在显示对话框后立即返回 false。
回答by WDuffy
I wrote the following code to use JQuery's UI Dialog as a modal confirmation. By submitting the form via the event target there is not a recursive call to the submit event handler.
我编写了以下代码来使用 JQuery 的 UI 对话框作为模式确认。通过事件目标提交表单，不会递归调用提交事件处理程序。
$(function () {
$('form[action*="/Delete"]').submit(function (e) {
e.preventDefault();
$("<div>Are you sure you want to delete this?</div>").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Ok: function () {
e.target.submit();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
});
回答by Ian Henry
This is because jQuery UI dialogs are not technically modal, unlike confirmand alert. They don't pause the javascript you're in the process of executing. But you can get essentially the same thing like this:
这是因为 jQuery UI 对话框在技术上不是模态的，不像confirm和alert。它们不会暂停您正在执行的 javascript。但是你可以得到本质上相同的东西：
function restOfTheCode(returnValue)
{
//do stuff
}
$("#dialog").dialog({
buttons : {
"Confirm" : function() { $(this).dialog("close"); restOfTheCode(true); },
"Cancel" : function() { $(this).dialog("close"); restOfTheCode(false); }
}
});
//anything down here executes immediately after the dialog is shown, so that's no good.
Is equivalent to:
相当于：
var returnValue = confirm("Are you sure you want to confirm?");
//do stuff
Edit: okay, with the addition of the submit issue the alternate code here doesn't make any sense. But the explanation is the same: it's not modal. If you really wanted to, you could simulate this:
编辑：好的，添加提交问题后，此处的备用代码没有任何意义。但解释是一样的：它不是模态的。如果你真的想，你可以模拟这个：
function modalDialogConfirm()
{
var buttonClicked = false;
var valueSelected;
$("#dialog").dialog({
buttons : {
"Confirm" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = true; },
"Cancel" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = false; }
}
});
function y { setTimeOut("x()", 100); }
function x { setTimeOut("y()", 100); }
while(!buttonClicked);
return valueSelected;
}
...but this just freezes the browser, so it's not a whole lot of useful...
......但这只会冻结浏览器，所以它不是很有用......
