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

Question

我的网站已经开发了大量的updatePanel，按钮和集成功能 我必须添加一些确认提示，这些提示应该是自定义的，并且有“继续”，“取消”等选项 这是一种可能的情况：

• 用户在一个文本框中写入内容，然后单击“提交”按钮。
• 出现提示。
• 当用户点击“继续”时，页面应继续正常流程，按“取消”时，应停止提交操作。

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

编辑：

我不能使用像Jquery这样的库。我可以使用ModalPopupExtenders，或简单地称为divs 从根本上说，问题是当点击这个提交按钮时，即使我在onclick事件中添加JS功能，也会执行提交操作并且不显示弹出窗口。
我可以ClearAll提交按钮处理程序，添加显示弹出窗口的按钮处理程序，但是当点击弹出的'continue'btn时如何继续执行'submit'动作？

Answer 1

编辑：回答 更新 问题：

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

原始答案：

Zoidberg指出了一个具体的实现（从我所听到的一个很好的实现）。还有其他几个。

一般原则是这样的：

• 创建一个涵盖页面上所有内容的绝对定位iframe;如果您愿意，可以在iframe上使用不透明度来“遮盖”它覆盖的所有内容。 iframe不必包含任何内容，它只是作为背景。这通常被称为“iframe垫片”技巧。将iframe的z-index设置为高于页面上任何其他元素的z-index。
• 在div（z顺序中较高位置）的顶部创建一个绝对定位的iframe，其中包含您的对话框和用户拥有的选项。请注意，这不在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

你不能错过w / jQuery UI。他们有一个模态对话框小部件。

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