如何创建自定义的“确认”窗口并在用户点击按钮之前暂停JS执行？

Question

好的，我正在进行一些RIA/AJAX相关的工作，需要创建一个"漂亮"的自定义确认框，它是一个DIV（而不是内置的javascript confirm）。我遇到了麻烦，无法确定如何暂停执行，以便用户有机会接受或拒绝条件，然后再继续或停止执行。（根据他们的答案）

所以这里是我正在处理的逻辑流程：

1. 用户从下拉列表中选择一个项目并单击按钮。
2. 在客户端javascript事件处理程序中，我需要检查他们在下拉列表中选择的项目的一系列条件（这是关键）。
3. 这些条件可能导致根本不显示任何确认消息，或者可能只有某些条件评估为true，这意味着我需要在继续之前要求用户接受或拒绝条件。同时只能显示一个确认框。

为了演示这个逻辑：

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库，尽管我没有发现这些库中可能已经包含了此问题的任何功能。

- uGard

Answer 1

很抱歉，不能像“确认”和“警告”对话框一样暂停Javascript运行时。如果要使用DIV实现，您需要将代码分成多个块，并且在自定义确认框的事件处理程序中调用下一个代码部分。

一些项目已经将“continuations”支持引入到Javascript中，例如Narrative Javascript，因此，如果您真的想在单个代码块中使其工作，可以研究一下这方面的内容。

- Marc Novakowski

Answer 2

我是这样做的：

方法如下：

1. Create your own confirm dialog box with buttons, let's say "Yes" and "No".
2. Create function that triggers the dialog box, let's say confirmBox(text, callback).
3. Bind events on "Yes" and "No" buttons - "Yes" - callback(true), "No" - callback(false).

4. When you are calling the function use this syntax:

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

- Romas

---

这不会暂停JavaScript执行。在回调被调用之前，JavaScript会继续执行。 - JotaBe

Answer 3

尝试这个，将“this”对象传递给您的JavaScript客户端函数，并启动您的自定义确认对话框，但始终返回false以防止触发后台提交。在退出处理函数之前，将相关信息复制到手动触发后台提交的自定义确认框的“是”按钮。

- Paul

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

- Peter Koman

Answer 5

在我的情况下，目标是在每行 .Net Repeater 中嵌入的删除链接被用户点击时显示一个 customConfirm 窗口。

每当用户单击任何特定行的删除链接时，都会调用 Custom Confirm 函数。现在，在确认函数内部，除了呈现新框之外，还需要完成以下两件事：

// 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函数来模拟确认暂停和连续性。

- ike egudu

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

  });

- katesky8