Question

我对jquery很新，我正在寻找可以取代确认对话框的东西。我在http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/#demo找到了jQuery Alert Dialogs 但是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');

jQuery警报对话框

5 个答案: