javascriptの - mimik window.confirm私はJavaScriptで私自身の確認ボックスを実装しようとしている

Question

ブールリターンを維持しています。しかし、私はwindow.confirmを使用しているすべての場所を変更する必要はありません。だから、window.confirmにプロキシを作成しました。

問題はMyConfirmが約束に基づいていますが、これまでconfirmがある場合、booleanとしての演技、ある

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

、などです。この状況に適切な解決策は何でしょうか？ 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 
};