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 
};