Javascript - 自定义确认对话框 - 替换 JS 确认
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5283062/
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
Javascript - Custom Confirm Dialog - replacing JS confirm
提问by MKN Web Solutions
This may be a easy answer-
这可能是一个简单的答案——
In my JS I've replaced JS's confirm function with my own. Which basically and simply looks like this:
在我的 JS 中，我用我自己的功能替换了 JS 的确认功能。基本上是这样的：
function confirm(i){
var options = '<br/><br/><input class="button1" value="Yes" type="button" onclick="return true"> <input class="button1" value="No" type="button" onclick="return false">';
$('#text').html(i+options);
$('#confirmDiv').fadeIn('fast');
}
Obviously the return true / false didn't work, or else I wouldn't be asking!
显然返回 true / false 不起作用，否则我不会问！
In another function i've got (So you get the picture):
在我得到的另一个函数中（所以你得到了图片）：
var con = confirm("Are you sure you'd like to remove this course?");
if(!con){return;}
How can I get confirm to return the value directly? I'd assume it's return {this.value} or so?
我怎样才能确认直接返回值？我假设它是 return {this.value} 左右？
Thanks!
谢谢！
回答by Pekka
Your problem is that your custom confirm isn't modal. That means that when your confirm is shown, the code runs on. There is no chance for you to wait for the user's choice within confirm()and return it from there.
您的问题是您的自定义确认不是modal。这意味着当您的确认显示时，代码会继续运行。你没有机会在里面等待用户的选择confirm()并从那里返回它。
As far as I know, there is no way to emulate the behaviour of a modal confirmation dialog in Javascript (except for the non-standard ShowModalDialog().)
据我所知，没有办法在 Javascript 中模拟模态确认对话框的行为（非标准ShowModalDialog().）
The usual way of doing this is adding a function() { ... }callback to each button's clickevent, and doing whatever the "ok" click is supposed to do in there.
这样做的通常方法是function() { ... }为每个按钮的click事件添加一个回调，并在那里做任何“确定”点击应该做的事情。
回答by Steve
My way around this problem was to add some arbitrary data to the object, and check for that data on click. If it existed, proceed with the function as normal, otherwise confirm with a yes/no (in my case using a jqtools overlay). If the user clicks yes - insert the data in the object, simulate another click and wipe the data. If they click no, just close the overlay.
我解决这个问题的方法是向对象添加一些任意数据，并在单击时检查该数据。如果存在，请照常使用该功能，否则使用是/否确认（在我的情况下使用 jqtools 覆盖）。如果用户单击是 - 在对象中插入数据，模拟另一次单击并擦除数据。如果他们点击否，只需关闭覆盖。
Here is my example:
这是我的例子：
$('button').click(function(){
if ($(this).data('confirmed')) {
// Do stuff
} else {
confirm($(this));
}
});
And this is what I did to override the confirm function (using a jquery tools overlay):
这就是我为覆盖确认功能所做的事情（使用 jquery 工具覆盖）：
window.confirm = function(obj){
$('#dialog').html('\
<div>\
<h2>Confirm</h2>\
<p>Are you sure?</p>\
<p>\
<button name="confirm" value="yes" class="facebox-btn close">Yes</button>\
<button name="confirm" value="no" class="facebox-btn close">No</button>\
</p>\
</div>').overlay().load();
$('button[name=confirm]').click(function(){
if ($(this).val() == 'yes') {
$('#dialog').overlay().close();
obj.data('confirmed', true).click().removeData('confirmed');
} else {
$('#dialog').overlay().close();
}
});
}
回答by Mitch
I found another hackedsolution to emulate the modale dialog like mentioned from Pekka ? before. If you break the JS execution there is no need to loop in a while(true). After retrieving the users input (click) we can go on with JS execution while calling the origin method again with eval and returning the users choice as boolean. I created a small jsfiddle with jquery and notyjs to simply show my solution: jsfiddle: Overriding native modal confirm alert
我找到了另一个被破解的解决方案来模拟 Pekka 中提到的模态对话框？前。如果您中断 JS 执行，则无需在 while(true) 中循环。检索用户输入（单击）后，我们可以继续执行 JS，同时使用 eval 再次调用 origin 方法并将用户选择返回为布尔值。我用 jquery 和 notyjs 创建了一个小的 jsfiddle 来简单地展示我的解决方案： jsfiddle: Overriding native modal confirm alert
Here again the important code:
这里又是重要的代码：
/** confirm as noty.JS **/
var calleeMethod2 = null;
var returnValueOfConfirm = null;
var args = null;
var calleeMethod = null;
var refreshAfterClose = null;
var savedConfirm = window.confirm;
window.confirm = function(obj) {
// check if the callee is a real method
if (arguments.callee.caller) {
args = arguments.callee.caller.arguments;
calleeMethod = arguments.callee.caller.name;
} else {
// if confirm is called as if / else - rewrite orig js confirm box
window.confirm = savedConfirm;
return confirm(obj);
}
if (calleeMethod != null && calleeMethod == calleeMethod2) {
calleeMethod2 = null;
return returnValueOfConfirm;
}
noty({
text: obj,
buttons: [{
text: 'Yes',
onClick: function($noty) {
$noty.close();
noty({
text: 'YES',
type: 'success'
});
}
}, {
text: 'No',
onClick: function($noty) {
$noty.close();
noty({
text: 'NO',
type: 'error'
});
}
}]
});
throw new FatalError("!! Stop JavaScript Execution !!");
}
function runConfirmAgain() {
calleeMethod2 = calleeMethod;
// is a method
if (calleeMethod != null) {
var argsString = $(args).toArray().join("','");
eval(calleeMethod2 + "('" + argsString + "')");
} else {
// is a if else confirm call
alert('confirm error');
}
}
