jQuery 警报对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6018946/
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 Alert Dialogs
提问by Antonio
I'm quite new on jquery and i was looking for something that could replace the confirm dialog. I found jQuery Alert Dialogs at http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/#demobut jConfirm do not return the same values as confirm(). Is possible to write a function to get the same confirm() value? It's about the meaning of callback function that I admit is not so clear for me :-)
我对 jquery 很陌生，我正在寻找可以替换确认对话框的东西。我在http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/#demo找到了 jQuery Alert Dialogs， 但 jConfirm 没有返回与 confirm() 相同的值。是否可以编写一个函数来获得相同的 confirm() 值？这是关于回调函数的含义，我承认我不太清楚:-)
回答by sled
jConfirm will never "return" anything because it's "event driven".
jConfirm 永远不会“返回”任何东西，因为它是“事件驱动的”。
jConfirm waits until the user has made a decision and then it will call the callback function which will handle the answer. ButjConfirm will not block the code execution flow like the standard confirm(...)does.
jConfirm 等待直到用户做出决定，然后它将调用将处理答案的回调函数。但是jConfirm 不会像标准confirm(...)那样阻塞代码执行流程。
So if your previous code looks like this:
因此，如果您之前的代码如下所示：
// ask for a decision
var answer = confirm("Leave website?"); // the whole script stops until the user has made a decision!
// process answer
if (answer){
alert("Bye bye!"); // the script waits here until the user has clicked "ok"
window.location = "http://www.google.com/";
}
else{
alert("Thanks for sticking around!"); // the script waits here until the user has clicked "ok"
}
it should look like this in jQuery:
它在 jQuery 中应该是这样的：
// previous code
// show confirm dialog but the script will not wait, the script execution goes forward
jConfirm('Leave website?', 'Confirmation Dialog', function(answer) {
// this is the callback function of the jConfirm dialog we made
// we arrive here when the user has made a decision
// the answer is true, he wants to leave
if (answer){
// show a jAlert box
jAlert("Bye Bye!", "Some Title", function() {
// this is the callback function of the jAlert box
// we arrive here when the user has clicked "ok"
// send him to google
window.location = "http://www.google.com/";
});
}
else{
// show a jAlert box without any callback
jAlert("Thanks for sticking around!", "Some Title");
}
});
// the code that follows here will be immediately executed
// because unlike confirm(), jConfirm() will not block
// the code execution flow
And for illustration:
并举例说明：
The standard JavaScript confirm() execution flow
标准的 JavaScript confirm() 执行流程
|
|
|
\/
confirm() waits for an answer...
no further code will be executed
until the user has made a decision
|
|
\/
handle the user's answer
|
|
\/
further code
execution
The jConfirm execution flow
jConfirm 执行流程
|
|
\/ -------> jConfirm Dialog
| |
| |
| \/
| Callback function
| when the user has made
| a decision.
| (handle the answer here)
|
|
\/
further code
execution
回答by Code Maverick
You can use the .dialogfrom jQuery UI. It's what I use.
您可以使用jQuery UI 中的.dialog。这是我用的。
You can make the buttons whatever you want and handle them like so:
您可以根据需要制作按钮并像这样处理它们：
$( "#dialog-confirm" ).dialog({
draggable: false,
resizable: false,
modal: true,
buttons: {
Ok: function() {
// Do whatever you want to do when the user clicks Ok
// Lastly, close the dialog
$(this).dialog("close");
},
Cancel: function() {
// Do whatever you want to do when the user clicks Cancel
// Lastly, close the dialog
$(this).dialog("close");
}
}
});
回答by Tim Rogers
The confirm()function is a synchronous call (i.e. it returns only when the user has clicked a button). jQuery-type dialogs are asynchronous (one call to open it, and a callback with the result). So you have to use a callback function and write your code differently. It's not possible to have a jquery-type dialog running in a synchronous call.
该confirm()函数是一个同步调用（即它仅在用户单击按钮时返回）。jQuery 类型的对话框是异步的（打开它的一个调用，和一个带有结果的回调）。因此，您必须使用回调函数并以不同方式编写代码。不可能在同步调用中运行 jquery 类型的对话框。
回答by Frenchi In LA
you can wrap the jconfirm in another function then wait for the response something like:
您可以将 jconfirm 包装在另一个函数中，然后等待类似以下内容的响应：
function Confirm(){
var response;
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
response = r;
});
return response
}
now you can use if(Confirm()){alert('Has been confirmed');}
现在你可以使用 if(Confirm()){alert('Has been confirmed');}
回答by Vins
Please see the reusable code below. Please remember that , Jquery alert won't wait for the user action. The statement after showAlert() will be executed immediately.
请参阅下面的可重用代码。请记住，Jquery 警报不会等待用户操作。showAlert() 之后的语句将立即执行。
/** dialogUtils.js start */
var iconStyle = '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>';
var messageStyleStart = '<span align="center" style="font-family:arial, verdana, sans-serif;font-size:9.3pt;">';
var messageStyleEnd = '</span>';
var alertDialogHeight =190;
var alertDialogWidth =460;
var fieldToFocus;
var $alertDialog;
/**
shows the alert box - if the title is passed display that otherwise shows
the default title
message - message to display on the alert box
title - title of the box
fieldIdtoFocus - if you need to give the focus to any field after showing the alert (id of the field)
height
width
*/
function showAlert(message,title,fieldIdtoFocus,height,width)
{
$alertDialog.html(iconStyle + messageStyleStart +message + messageStyleEnd);
if(title =='undefined'|| null ==title ||''==title)
$alertDialog.dialog( "option", "title", alertHeader );
else
$alertDialog.dialog( "option", "title", title );
// check for the field focus value, if the value passed use it, otherwise reset it.
if(fieldIdtoFocus == 'undefined' || null == fieldIdtoFocus || ''== fieldIdtoFocus)
fieldToFocus = null;
else
fieldToFocus = fieldIdtoFocus;
// check if got height
if(height == 'undefined' || null == height || ''== height)
$alertDialog.dialog( "option", "height", alertDialogHeight);
else
$alertDialog.dialog( "option", "height", height);
//check if got width
if(width == 'undefined' || null == width || ''== width)
$alertDialog.dialog( "option", "width", alertDialogWidth);
else
$alertDialog.dialog( "option", "width", width);
// open the alert dialog box
$alertDialog.dialog('open');
// prevent the default action
return false;
}
$(document).ready(function(){
//jquery alert box - the general alert box
$alertDialog = $('<div style="vertical-align:middle;"></div>')
.html('This Message will be replaced!')
.dialog({
autoOpen: false,
modal: true,
position: 'top',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
if(null != fieldToFocus){
if($('#'+fieldToFocus).is(':visible')) // if it is visble then only show
$('#'+fieldToFocus).focus();
}
}
}
});
});
/** dialogUtils.js end */
// call the function from anywhere in your code after including the dialogUtils.js above */
showAlert("Please enter your phone number",'Alert!','phoneNumber');
