javascript 用jquery确认替换javascript确认
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19374499/
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
Replace javascript confirm by jquery confirm
提问by arjuncc
I use the following code to use default javascript confirm by jquery ui dialogue.
我使用以下代码通过 jquery ui 对话使用默认 javascript 确认。
jQuery.extend({
confirm: function(message, title, okAction) {
jQuery("<div></div>").dialog({
// Remove the closing 'X' from the dialog
open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); },
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
return true;
},
"Cancel": function() {
jQuery(this).dialog("close");
return false;
}
},
close: function(event, ui) { jQuery(this).remove(); },
resizable: false,
title: title,
modal: true
}).text(message);
}
});
jQuery.confirm(
"LogOut",
"Do you want to log out",
function() {
});
Now I need to use this same code in a log out action. So that I can replace the javascript confirm in the code.
现在我需要在注销操作中使用相同的代码。这样我就可以替换代码中的javascript确认。
<a class="homeImage" onclick="return confirm('Do you want to logout?');" href="/future/myhome/head?$event=logout">LOG OUT</a>
The problem I am facing now is, when I replace the confirm with another function and wait for its return value to make the decision, the dialogue box doesn't return the value to a variable. These two functions are executed simultaniously(its showing the alert, but it also get directed to the href target). Is there any way that the method can return a true or false value and hence proceed to the href target.
我现在面临的问题是，当我用另一个函数替换确认并等待其返回值做出决定时，对话框不会将该值返回给变量。这两个函数同时执行（它显示警报，但它也被定向到 href 目标）。有什么方法可以让该方法返回 true 或 false 值，从而继续执行 href 目标。
reference: jQuery Extend,jQuery UI Replacement for alert
related question : js override confirm
参考：jQuery Extend，jQuery UI 替换警报
相关问题：js 覆盖确认
采纳答案by Piotr Stapp
The problem is that default confirmdialog is synchronus and block the whole browser UI. JQuery dialog is asynchronous and does not block UI (because it needs it to render).
问题是默认confirm对话框是同步的并阻止整个浏览器 UI。JQuery 对话框是异步的并且不会阻塞 UI（因为它需要它来呈现）。
So the answer to your problem is following. You need to change:
所以你的问题的答案如下。你需要改变：
buttons: {
"Ok": function() {
window.location = "/future/myhome/head?$event=logout"
},
and
和
<a class="homeImage" onclick="return jQuery.confirm('Do you want to logout?');return false;" href="/future/myhome/head?$event=logout">LOG OUT</a>
回答by LazyTarget
I don't know if you could actually do that as the jQuery.dialogfunction is asynchronous.
我不知道您是否真的可以这样做，因为该jQuery.dialog函数是异步的。
You could use a promise library to setup the button click events. But then you cannot simply specify a method in the onclickattribute and have to do it through code
您可以使用承诺库来设置按钮单击事件。但是你不能简单地在onclick属性中指定一个方法而必须通过代码来完成
var d = jQuery.Deferred();
d.resolve(true); // resolve is used then to mark the function as complete
return d.promise(); // return the promise
jQuery.extend({
confirm: function(message, title, okAction) {
var d = jQuery.Deferred();
jQuery("<div></div>").dialog({
// Remove the closing 'X' from the dialog
open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); },
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
d.resolve(true);
return true;
},
"Cancel": function() {
jQuery(this).dialog("close");
d.resolve(false);
return false;
}
},
close: function(event, ui) { jQuery(this).remove(); },
resizable: false,
title: title,
modal: true
}).text(message);
return d.promise();
}
});
For more info about jQuery promise library see jQuery reference
有关 jQuery 承诺库的更多信息，请参阅jQuery 参考
Edit: Another way to to set it up: jsFiddle
编辑：另一种设置方式：jsFiddle
回答by Tony Carbone
Personally, I use confirm more for conditional execution of a function or posting a form...
就我个人而言，我更多地使用确认来有条件地执行函数或发布表单......
So, using your example, I'd have made the following small changes:
因此，使用您的示例，我会进行以下小改动：
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
okAction();
},
And then called the Confirm as follows:
然后调用 Confirm 如下：
onclick="jQuery.confirm('Do you want to logout?','Confirm:',function(){window.location='/future/myhome/head?$event=logout'}); return false;">LOG OUT</a>
