如何创建自定义“确认”并暂停 js 执行，直到用户单击按钮？答案

【问题标题】：How to create a custom "confirm" & pause js execution until user clicks button?如何创建自定义“确认”并暂停 js 执行，直到用户单击按钮？
【发布时间】：2010-09-26 08:51:05
【问题描述】：

好的，我正在做一堆 RIA/AJAX 的东西，需要创建一个“漂亮”的自定义确认框，它是一个 DIV（不是内置的 javascript 确认）。我无法确定如何在执行中暂停以让用户有机会在恢复或停止执行之前接受或拒绝条件。（取决于他们的回答）

以下是我正在处理的一般逻辑流程：

用户从下拉列表中选择一个项目并点击按钮。
在按钮的客户端 javascript 事件处理程序中，我需要检查他们在下拉菜单中选择的项目的一系列条件（这是关键）。
这些条件可能会导致根本不显示任何确认，或者可能只有部分条件评估为真，这意味着我需要让用户在继续之前接受或拒绝该条件。一次只能显示一个确认信息。

演示逻辑：

function buttonEventHandler() {

if (condition1) {
  if(!showConfirmForCondition1) // want execution to pause while waiting for user response.
     return; // discontinue execution
}

if (condition2) {
  if (!showConfirmForCondition2) // want execution to pause while waiting for user response.

     return; // discontinue execution
}

if (condition3) {
  if (!showConfirmForCondition3) // want execution to pause while waiting for user response.

     return; // discontinue execution
}

...  
}

如果有人之前处理过这个挑战并找到了解决方案，我们将不胜感激。需要说明的是，我还使用了 MS Ajax 和 jQuery 库，尽管我还没有找到任何可能已经包含在解决这个问题的功能中。

【问题讨论】：

标签： jquery ajax ria javascript

【解决方案1】：

恐怕不能像“确认”和“警报”对话框一样暂停 Javascript 运行时。要使用 DIV 执行此操作，您必须将代码分成多个块，并让自定义确认框上的事件处理程序调用下一段代码。

已经有一些项目将“延续”支持引入 Javascript，例如 Narrative Javascript，所以如果你真的希望让它在单个代码块中工作，你可以研究一下。

【讨论】：

【解决方案2】：

我是如何做到的：

创建您自己的确认对话框用按钮，让我们说“是”和 “不”。
创建触发对话框，比如说confirmBox(text, callback)。
在“是”和“否”上绑定事件按钮 - “是” - callback(true), “不” - callback(false)。

当你调用函数时使用这个语法：

confirmBox("Are you sure", function(callback){
    if (callback) {
        // do something if user pressed yes
    } 
    else {
        // do something if user pressed no
    }
});

【讨论】：

这不会暂停 JavaScript 的执行。 JavaScript 在调用回调之前继续执行。

【解决方案3】：

试试这个，将 'this' 对象传递给您的 javascript 客户端函数并启动您的自定义确认对话框，但总是返回 false 以防止回发触发。不过，在您退出处理功能之前，请将触发回发的相关信息手动复制到自定义确认框的“是”按钮。

【讨论】：

【解决方案4】：

就像 Paul 说的...这对我有用（我猜你使用 ASP.NET，但如果不是，你可以轻松地重写它）：

function BeforeDelete(controlUniqueId) {
    confirmPopup('question...?', function() { __doPostBack(controlUniqueId, ''); });
    return false;
}

function confirmPopup(message, okCallback) {
    $('#popup-buttons-confirm').click(okCallback);
    // set message
    // show popup
}

【讨论】：

【解决方案5】：

在我的例子中，目标是每当用户单击嵌入在 .Net 中继器的每一行中的删除链接时显示一个 customConfirm 框

每当用户单击任何特定行的删除链接时，都会调用自定义确认函数。现在在confirm函数里面，除了渲染新框，还需要做以下2件事：

// obtain the element(we will call it targetObject) that triggered the event

targetObject = (event.target==undefined ? event.srcElement : event.target);

// include a call to _doPostBack in the onclick event of OK/YES button ONLY

(targetObject.href!=undefined){ eval(targetObject.href); } else{ _doPostBack(targetObject.name,''); // it is assumed that name is available

上面的 if/else 结构与我的情况有关。主要是知道您可以使用事件对象和__doPostBack 函数来模拟确认暂停和连续性。

【讨论】：

【解决方案6】：

查看我的 Fiddle 模式警报框：http://jsfiddle.net/katiabaer/UXM9y/33/ 使用 JqueryUI 模式

   showAlert = function (msg, header, callback) {
      var mydiv = $("<div id='mydiv'> </div>");
      mydiv.alertBox({
          message: msg,
          header: header,
          callback: callback
      });

  },

  $('#show').click(function () {
      var m = $('#message').val();
      var h = $('#header').val();
      var callback = function () {
          alert("I can do anything here");
      }
      showAlert(m, h, callback);

  });

  $.widget("MY.alertBox", {
      options: {
          message: "",
          header: "",
          callback: ''
      },

      _create: function () {
          var self = this;
          self.callback = self.options.callback;

          self.container = $(".alert-messagebox");
          var header = self.container.find(".alert-header");
          header.html(self.options.header);

          var message = self.container.find(".alert-message");
          message.html(self.options.message);

          var closeButton = self.container.find("button.modal-close-button");
          closeButton.click(function () {
              self.close();
          });

          self.show();
      },

      show: function () {
          var self = this;
          self.container.modal({
              maxWidth: 500
          });
      },

      close: function () {

          if (this.callback != null) {
              this.callback();
              $.modal.close();
              return;
          }
          $.modal.close();

      },

      destroy: function () {
          $.Widget.prototype.destroy.call(this);
      }

  });

【讨论】：