优雅的 WebForms、AJAX 和提示弹出窗口答案

【问题标题】：WebForms, AJAX and prompt popups elegantly优雅的 WebForms、AJAX 和提示弹出窗口
【发布时间】：2010-11-25 07:23:24
【问题描述】：

我已经开发了一个网站，其中包含大量更新面板、按钮和集成功能。
我必须添加一些确认提示，这些提示应该是自定义的，并且有诸如“继续”、“取消”之类的选项。
这是一种可能的情况：

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

我希望尽可能不那么突兀，实现这一目标的最佳方法是什么？

编辑：

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

【问题讨论】：

这个问题太开放了，无法回答

标签： asp.net javascript asp.net-ajax webforms

【解决方案1】：

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

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

原答案：

Zoidberg 指出了一个具体的实现（据我所知，这是一个很好的实现）。还有其他几个。

一般原理是这样的：

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

iframe 至少有两个用途：

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

编辑：据记录，大多数 JavaScript UI 工具包都提供了这种“模态”功能，包括 jQuery UI、YUI、Dojo、Glow、...

【讨论】：

【解决方案2】：

为什么不直接在按钮的 OnClientClick 事件中添加这样的内容？

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

【讨论】：

所以我必须修改页面上每个按钮上的 OnCLientCLick 吗？如果我显示我的自定义弹出窗口，每个按钮都相同，我如何确定我的弹出窗口“自定义提示”返回 true 还是 false 以继续或停止应用程序的流程？
我最初的想法是在单击使弹出窗口出现的按钮时动态设置“继续”btn 处理程序。
因为我不知道你的表格是什么样子的，所以很难说。你有多个表格吗？提交多少个按钮？ T.J. 的更新答案回复：表单提交是一个不错的选择。

【解决方案3】：

YUI 有一些不错的对话框。

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

它们甚至可以像这个加载面板一样变成模态的

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

【讨论】：

【解决方案4】：

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

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

【讨论】：