JavaScript的 - mimik window.confirm與保持布爾返回

Question

我想在JavaScript中實現我自己的確認框。但我不想改變我使用過的所有地方window.confirm。所以，我在window.confirm上創建了代理。

一樣，

(function (proxied) { 
    window.confirm = function() { 
     var res = MyConfirm.apply(this, arguments); 
     return res; 
    }; 
})(window.confirm); 

的問題是，MyConfirm是基於希望，但是在以往任何時候confirm是存在的，它充當boolean。對這種情況適合的解決方案是什麼？是否可以製作一個與window.confirm完全相同的自定義功能？

是否有，無論如何，我們可以返回布爾或其他值從一個函數，這取決於一個async調用？

Answer 1

您可能可以通過自定義確認對話框獲得所需的行爲，前一段時間我創建了一個自定義對話框控件，使我可以靈活地進行模態確認對話。我創建了一個完整的示例jsFiddle here。爲了我的需要，對話框是一個常見的js庫的一部分，只要實例化它就會顯示出來，並且可以包含內容，大小和確認按鈕回調的選項，但是您可以在對話框對象上有確認功能，工作來初始化並顯示它，並返回響應。這是完整的代碼，這也是在jsFiddle ...

// Launch the dialog from a click on an element on the page 
$("#launchDialog").click(function() { 
    showConfirmDialog(); 
}) 

function showConfirmDialog() { 
    //Define the dialog options 
    var dlgOptions = { 
     width: 300, 
     height: 150, 
     modal: true, 
     confirm: true, 
     confirmopts: { 
     closeOnOk: true, 
     question: "Are you sure?", 
     buttons: { 
      Ok: { 
       Label: "OK", 
       callback: dialogOkCallback 
      }, 
      Cancel: { 
       Label: "Cancel", 
       callback: dialogCancelCallback 
      }, 
     } 
     } 
    } 

    // Initialize the dialog object and display it 
    var dlg = MySite.Common.createDialog("confirmDialog", "Confirmation Required", "<p>Some additional dialog content here</p>", dlgOptions, document); 
} 

// Handle the OK response 
function dialogOkCallback() { 
    $("#dialogresult").html("You clicked Ok"); 
} 

// Handle the Cancel response 
function dialogCancelCallback() { 
    $("#dialogresult").html("You clicked Cancel"); 
} 

// Common library with dialog code 
if (typeof (MySite) == "undefined") 
{ MySite = { __namespace: true }; } 

MySite.Common = { 
    createDialog: function (tagId, title, content, options, documentobj) { 
     var dlg; 
     var dlgLeft; 
     var dlgTop; 
     // Defaults 
     var dlgWidth = 210; 
     var dlgHeight = 140; 
     var dlgConfirmation = ""; 
     var dlgConfirmationContainerHTML = ""; 
     var dlgConfirmationContainer; 
     var isNewDialog; 
     var docBody; 
     var dlgTag; 
     var dlgModalBg; 
     var docObj; 

     // Take the document object passed in or default it, this is where the dialog div will be anchored 
     if (documentobj) { 
     docObj = documentobj; 
     } 
     else { 
     docObj = document; 
     } 
     docBody = $(docObj.body); 

     // Process the options if available 
     if (options) { 
     if (options.width) { 
      dlgWidth = options.width; 
     } 

     if (options.height) { 
      dlgHeight = options.height; 
     } 

     if (options.modal) { 
      // Set up the background div if this is a modal dialog 
      dlgModalBg = $(docObj.getElementById("dialogModalBackground")); 
      if (dlgModalBg.length == 0) { 
       docBody.append("<div id='dialogModalBackground' style='background-color: #000000; z-index:9998; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.3;'>&nbsp;</div>"); 
      } else { 
       dlgModalBg = docBody.find("#dialogModalBackground"); 
       dlgModalBg.show(); 
      } 
     } 
     } 

     // Do some dialog positioning 
     dlgLeft = (docObj.body.clientWidth/2) - (dlgWidth/2); 
     dlgTop = (docObj.body.clientHeight/2) - (dlgHeight/2) - 50; 
     // Make sure the dialog top value doesn't go negative 
     dlgTop = Math.max(dlgTop, 0); 
     dlg = $(docObj.getElementById(tagId)); 

     // Create the dialog div 
     if (dlg.length == 0) { 
     isNewDialog = true; 
     docBody.append("<div id='dialogContainer_" + tagId + "' style='width: " + dlgWidth + "px; min-height: " + dlgHeight + "px; background-color: #ffffff; border: 1px solid darkgrey; z-index: 9999; position: absolute; top: " + dlgTop + "px; left: " + dlgLeft + "px;'><p id='dlgHeader' class='draggable_handle' style='color: #FFFFFF; margin: 0px; padding: 5px 1px 1px 5px; height: 18px; background-color: #005f9f; font-weight: bold; font-size: 1.2em; font-family: Arial;'>" + title + "<span style='float: right; font-size: 0.8em; cursor: pointer; padding-right: 4px;' id='dialogClose_" + tagId + "'>Close</span></p><div style='padding: 0px; margin: 0px 2px 0px 2px; min-height: " + (dlgHeight - 24).toString() + "px;' id='" + tagId + "'></div></div>"); 
     dlg = docBody.find("#" + tagId); 
     } else { 
     isNewDialog = false; 
     dlg.html(""); 
     docBody.find("#dialogContainer_" + tagId).show(); 
     } 

     // Make the dialog draggable if that feature is available 
     if ($.ui) { 
     if ($.ui.draggable) { 
      docBody.find("#dlgHeader").css("cursor", "move"); 
      docBody.find("#dialogContainer_" + tagId).draggable({ handle: ".draggable_handle" }); 
     } 
     } 

     if (content) { 
     dlg.html(content); 
     } 

     // Create or update the confirmation dialog content 
     dlgConfirmationContainer = docBody.find("#Confirmation_" + tagId); 

     // Set up the buttons if this is a confirmation dialog 
     if (options.confirm == true) { 
     if (options.confirmopts.question != null) { 
      dlgConfirmation += options.confirmopts.question + "<br/><br/>"; 
     } 
     if (options.confirmopts.buttons.Ok.Label != null) { 
      dlgConfirmation += "<input id='dialogOk_" + tagId + "' style='width: 45%' type='button' value='" + options.confirmopts.buttons.Ok.Label + "'/>&nbsp;"; 
     } 
     if (options.confirmopts.buttons.Cancel != null && options.confirmopts.buttons.Cancel.Label != null) { 
      dlgConfirmation += "<input id='dialogCancel_" + tagId + "' style='width: 45%' type='button' value='" + options.confirmopts.buttons.Cancel.Label + "'/>"; 
     } 

     if (dlgConfirmationContainer.length == 0) { 
      dlg.append("<div id='Confirmation_" + tagId + "' style='padding: 3px'>" + dlgConfirmation + "</div>"); 
     } else { 
      dlgConfirmationContainer.show(); 
      dlgConfirmationContainer.html(dlgConfirmation); 
     } 
     } else { 
     dlgConfirmationContainer.hide(); 
     } 

     // Assign click events if this is a confirmation dialog. the jQuery click() assignment normally would APPEND click events to 
     // the object, but those are lost when the div container html is reassigned above, so we assign the click each time this function 
     // is called. 
     if (options.confirm) { 
     docBody.find("#dialogOk_" + tagId).click(function (event) { 
      event.preventDefault(); 
      if (options.confirmopts.closeOnOk == true) { 
       docBody.find("#dialogContainer_" + tagId).hide(); 
       docBody.find("#dialogModalBackground").hide(); 
      } 
      if (!options.confirmopts.keepOnOk) { 
       docBody.find("#Confirmation_" + tagId).hide(); 
      } 
      if (options.confirmopts.buttons.Ok.callback != null) { 
       options.confirmopts.buttons.Ok.callback(); 
      } 
     }); 

     docBody.find("#dialogCancel_" + tagId).click(function (event) { 
      event.preventDefault(); 
      docBody.find("#dialogContainer_" + tagId).hide(); 
      docBody.find("#dialogModalBackground").hide(); 
      if (options.confirmopts.buttons.Cancel.callback != null) { 
       options.confirmopts.buttons.Cancel.callback(); 
      } 
     }); 
     } 

     docBody.find("#dialogClose_" + tagId).click(function (event) { 
     event.preventDefault(); 
     docBody.find("#dialogContainer_" + tagId).hide(); 
     docBody.find("#dialogModalBackground").hide(); 
     }); 

     dlg.closeDialog = function() { 
     docBody.find("#dialogContainer_" + tagId).hide(); 
     docBody.find("#dialogModalBackground").hide(); 
     }; 

     return dlg; 
    }, 
    __namespace: true 
};