使用 JavaScript 自定义确认对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10824984/
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
Custom confirm dialog with JavaScript
提问by supergiox
I would like to create a JavaScript function similar to confirm()that shows a dialog (a div with a question and 2 buttons) and returns trueif the user clicks "Ok" or falseotherwise.
我想创建一个类似于confirm()显示对话框（一个带有问题和 2 个按钮的 div）的 JavaScript 函数，并true在用户单击“确定”或false其他方式时返回。
Is it possible to do that using JavaScript/jQuery but withoutplugins (e.g. jQuery UI or Dialog)? Because I'm trying to reduce size and round trip times...
是否可以使用 JavaScript/jQuery 但没有插件（例如 jQuery UI 或 Dialog）来做到这一点？因为我试图减少尺寸和往返时间......
I tried to write this code, but I don't know how to make the function "wait" for the user click.
我试着写这段代码，但我不知道如何让函数“等待”用户点击。
I would like to use my function in this way:
我想以这种方式使用我的功能：
answer=myConfirm("Are you sure?")
In this way I could use the same function in several contexts, simply changing the question passed as a parameter. This is the same behavior of confirm()
通过这种方式，我可以在多个上下文中使用相同的函数，只需更改作为参数传递的问题。这与confirm() 的行为相同
回答by georgebrock
Rather than waiting for the user's input and then returning from the function, it is more common in JavaScript to provide a callback function that will be called when the action you're waiting for is complete. For example:
与其等待用户的输入然后从函数中返回，不如在 JavaScript 中提供一个回调函数，该函数将在您等待的操作完成时被调用。例如：
myCustomConfirm("Are you sure?", function (confirmed) {
if (confirmed) {
// Whatever you need to do if they clicked confirm
} else {
// Whatever you need to do if they clicked cancel
}
});
This could be implemented along the lines of:
这可以按照以下方式实施：
function myCustomConfirm(message, callback) {
var confirmButton, cancelButton;
// Create user interface, display message, etc.
confirmButton.onclick = function() { callback(true); };
cancelButton.onclick = function() { callback(false); };
}
回答by SpYk3HH
If using jQuery, why not implement jQueryUI? And use the Dialogfunction as follows:
如果使用 jQuery，为什么不实现jQueryUI？并使用Dialog函数如下：
as a 2 part:
作为 2 部分：
HTML
HTML
<div id="dialog-confirm" title="ALERT">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure?</p>
</div>
Script
脚本
$( "#dialog-confirm" ).dialog({
resizable: false,
modal: true,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
All in Script:
全部在脚本中：
$(function() {
$("<div />").attr("id", "dialog-confirm").append(
$("<p />").text('Are you sure?').css("text-align", "center").prepend(
$("<span />").addClass("ui-icon ui-icon-alert").css({
float: 'left',
margin: '0 7px 20px 0'
})
)
).dialog({
resizable: false,
modal: true,
title: "ALERT",
buttons: {
"OK": function() {
answer=1;
$(this).dialog("close");
},
"Cancel": function() {
answer=0;
$(this).dialog("close");
}
}
});
});
jsFiddle
js小提琴
回答by Brad Barrow
This really should be done with a callback. The closest thing to what you're after would be to use a publish and subscribe model with some custom events.
这真的应该通过回调来完成。最接近您所追求的是使用带有一些自定义事件的发布和订阅模型。
To do so:
这样做：
When a user clicks the yes button, trigger a custom event called clickedYes. Do the same for "no"
当用户单击 yes 按钮时，触发一个名为 clickedYes 的自定义事件。对“不”做同样的事情
$('#yesbtn').click(function(){
$(document).trigger('clickedYes');
});
$('#nobtn').click(function(){
$(document).trigger('clickedNo');
});
Now we need to "listen" or subscribe for those events and execute the appropriate action in context.
现在我们需要“监听”或订阅这些事件并在上下文中执行适当的操作。
Lets create a hypothetical situation: Your user clicks delete and you want to confirm that choice.
让我们创建一个假设情况：您的用户单击删除并且您想确认该选择。
First setup what you want to happen if they click yes:
首先设置你想要发生的事情，如果他们点击是：
$(document).unbind('clickedYes'); //Unbind any old actions
$(document).bind('clickedYes',function(){
//Code to delete the item
//Hide the popup
});
then what you want to happen if they click no:
那么如果他们点击否，你想发生什么：
$(document).unbind('clickedNo'); //Unbind any old actions
$(document).bind('clickedNo',function(){
//Hide the popup and don't delete
});
So we've setup actions that are listening for clickedYes or clickedNo. Now we just need to show the user the popup so that they have to click yes or no. When they do, they'll trigger the events above.
所以我们已经设置了监听 clickedYes 或 clickedNo 的动作。现在我们只需要向用户显示弹出窗口，以便他们必须单击是或否。当他们这样做时，他们将触发上述事件。
so your myConfirm() function will just do the following:
所以你的 myConfirm() 函数将只执行以下操作：
function myConfirm(msg){
//change the message to 'msg'
//Show the popup
}
So the order would be:
所以顺序是：
- Bind triggers for the custom events to the yes and no buttons
- Before prompting - unbind any old actions and attach your new ones
- Present the user with a popup that'll cause them to trigger on of your actions.
- 将自定义事件的触发器绑定到是和否按钮
- 在提示之前 - 取消绑定所有旧操作并附加新操作
- 向用户展示一个弹出窗口，让他们触发您的操作。
This will allow you to call the function like this myConfirm('Are you sure'); It's not quite what you're after...but I don't think it's possible to do exactly what you want.
这将允许您像这样调用函数 myConfirm('Are you sure'); 这不是你想要的......但我认为不可能完全按照你的意愿去做。
