jQuery警報對話框

Question

我是jquery的新手，我正在尋找可以取代確認對話框的東西。我發現jQuery警報對話框爲http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/#demo ，但jConfirm不返回與confirm（）相同的值。 是否可以編寫一個函數來獲得相同的confirm（）值？ 這是關於回調函數的含義，我承認對我來說不那麼清楚:-)

Answer 1

jConfirm將永遠不會「返回」任何東西，因爲它是「事件驅動」的。

jConfirm等待用戶做出決定，然後它會調用回調函數來處理答案。 但是 jConfirm不會像標準confirm(...)那樣阻止代碼執行流程。

所以，如果你以前的代碼如下所示：

// 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" 
} 

它看起來應該像這樣的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 

並加以說明：

標準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 

的jConfirm執行流程

| 
    | 
    \/ -------> jConfirm Dialog 
    |     | 
    |     | 
    |     \/ 
    |    Callback function 
    |    when the user has made 
    |    a decision. 
    |    (handle the answer here) 
    |     
    | 
    \/ 
further code 
execution 

Answer 2

您可以使用jQuery UI中的.dialog。這是我使用的。

你可以做任何你想要的按鈕和處理它們像這樣：

$("#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"); 
     } 

    } 

}); 

Answer 3

的confirm()功能是一個同步調用（即它返回只有當用戶點擊了一個按鈕）。 jQuery類型的對話是異步的（一個調用來打開它，一個調用結果）。所以你必須使用回調函數並以不同的方式編寫代碼。在同步調用中運行jquery類型的對話框是不可能的。

Answer 4

你可以用在其他功能jconfirm然後等待響應類似：

function Confirm(){ 
var response; 
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) { 
    response = r; 
}); 
return response 
} 

現在你可以使用if(Confirm()){alert('Has been confirmed');}

Answer 5

請請參閱下面的可重用代碼。 請記住，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');