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

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

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

1. 用户从下拉列表中选择一个项目并单击按钮。
2. 在客户端javascript eventhandler for button中，我需要检查他们在下拉列表中选择的项目的条件（这是关键）。
3. 这些条件可能导致根本没有显示任何确认，或者可能只有一些条件可能评估为真，这意味着我需要在继续之前要求用户接受或拒绝该条件。 一次只能显示一个确认。

为了certificate逻辑：

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库，虽然我没有找到任何可能已经包含在这个问题的function。

Answer 1

我不敢说以“确认”和“警告”对话框暂停它的方式暂停Javascript运行时是不可能的。 要使用DIV执行此操作，您必须将代码分解为多个块，并在自定义确认框上使用事件处理程序调用下一部分代码。

已经有一些项目为Javascript带来了“延续”支持，例如Narrative Javascript，所以如果你真的热衷于让它在单个代码块中工作，你可以调查一下。

Answer 2

我这样做的方式：

1. 使用按钮创建自己的确认对话框，让我们说“是”和“否”。
2. 创建触发对话框的函数，假设为confirmBox(text, callback) 。
3. 在“是”和“否”按钮上绑定事件 – “是” – callback(true) ，“否” – callback(false) 。

4. 当您调用该函数时，请使用以下语法：

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

Answer 3

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

Answer 4

像保罗说…这对我有用（我想你使用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 } 

Answer 5

就我而言，目标是每当用户点击.Net Repeater的每一行中嵌入的删除链接时，都会显示一个customConfirm框。

每当用户单击任何特定行的删除链接时，将调用自定义确认function。 现在在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函数模拟确认暂停和连续性。

Answer 6

看看我的小提琴模态警报框： http ： //jsfiddle.net/katiabaer/UXM9y/33/与JqueryUI模态

  showAlert = function (msg, header, callback) { var mydiv = $("
 
"); 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); } });