WebForms，AJAX和提示弹出窗口优雅

Question

我已经开发了一个网站，其中包含大量的updatePanel，按钮和集成功能。
我必须添加一些确认提示，这些提示应进行自定义，并具有“ Continue”，“ Cancel”之类的选项。
这是一种可能的情况：

• 用户在一个文本框中写一些东西，然后单击提交按钮。
• 出现提示。
• 当用户单击继续时，页面应以正常流程继续，而当单击取消时，应停止提交动作。

我希望尽可能地减少干扰，实现此目标的最佳方法是什么？

编辑：

我不能使用像Jquery这样的任何库。 我可以使用ModalPopupExtenders或简单设置样式的div。
从根本上讲，问题是，即使我在onclick Event上添加了JS函数，单击此提交按钮时，也会执行提交操作，并且不会出现我的弹出窗口。
我可以ClearAll提交按钮处理程序，添加一个显示我的弹出窗口的处理程序，但是当单击弹出窗口的“继续” btn时如何继续执行“提交”操作？

Answer 1

编辑：回答您的更新的问题：

• 钩表单的submit事件，触发弹出式窗口，并返回false（如果使用的是DOM0或jQuery的处理程序）或拨打preventDefault如果使用的是现代的处理程序。
• 当您准备好真正提交表单时，请调用表单的submit函数。 这不会在符合标准的浏览器上触发submit事件（但是显然要对所有目标浏览器进行测试）

原始答案：

Zoidberg指出了一种特定的实现（从我所听到的来看，这是一个很好的实现）。 还有其他几个。

一般原理如下：

• 创建一个绝对定位的iframe ，以覆盖页面上的所有内容； 您可以根据需要在iframe上使用不透明度来“灰化”它涵盖的所有内容。 iframe不必包含任何内容，它只是作为背景。 这通常称为“ iframe填充”技巧。 将iframe的z-index设置为高于页面上其他任何元素的z-index。
• 在iframe顶部（Z轴的较高位置）上创建一个绝对定位的div ，其中包含您的对话框和用户拥有的选项。 请注意，这不在iframe的文档内，而是您主页DOM的一部分。
• 用户选择一个选项后，请删除div和iframe并执行您需要做的其他任何事情（转到另一页，更新内容等）。

iframe至少有两个作用：

• 它使您可以轻松地将基础内容变灰
• 它吃了鼠标点击
• 它处理Internet Explorer上表单字段的问题

编辑：并且，据记录，大多数JavaScript UI工具包都提供了这种“模式”功能，包括jQuery UI，YUI，Dojo，Glow等。

Answer 2

为什么不只向按钮的OnClientClick事件中添加类似的内容？

OnClientClick = "javascript: return confirm('Your message here.');"

Answer 3

YUI有一些不错的对话框。

http://developer.yahoo.com/yui/examples/container/simpledialog-quickstart.html

甚至可以像此加载面板一样将它们设置为模态

http://developer.yahoo.com/yui/examples/container/panel-loading.html

Answer 4

使用jQuery UI，您不会出错。 他们有一个模式对话框小部件。

http://jqueryui.com/demos/dialog/#modal-confirmation