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完全相同的自定义函数？

无论如何，我们可以从依赖于{{1}}调用的函数返回布尔值或其他值吗？

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