WebForms, AJAX and prompt popups elegantly

Question

I have a web site already developed with tons of updatePanels, buttons, and integrated functionality.
I have to add some confirmation prompts, these prompts should be customized, and have options like 'Continue', 'Cancel' .
This is a possible scenario:

• The user writes something in one textbox, and then clicks a submit button.
• The Prompt appears.
• When the user clicks continue the page should continue with the normal flow, and when press cancel the submit action should be stopped.

I want to be the less obtrusive possible, What is the best approach to achieve this?

EDIT:

I can't use any library like Jquery. I can use ModalPopupExtenders, or simply styled divs.
Fundamentally the problem is when clicking this submit button, the submit action is taken and my popup does not appear, even if I add the JS function at onclick Event.
I can ClearAll submit button handlers, add the one that shows my popup, but how can I continue with the 'submit' action when the popup's 'continue' btn is clicked?

Answer 1

YUI has some nice dialogs.

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

They can even be made to be modal just like this loading panel

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

Answer 2

You can't go wrong w/ jQuery UI. They have a modal dialog widget.

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

Answer 3

EDIT: Answering your updated question:

• Hook the form's submit event, trigger your pop-up, and return false (if using a DOM0 or jQuery handler) or call preventDefault if using a modern handler.
• When you're ready to really submit the form, call the form's submit function. This doesn't trigger the submit event on conformant browser (but test with all your target browsers, obviously)

Original answer:

Zoidberg has pointed to a specific implementation (and a good one, from what I've heard). There are several others.

The general principle works like this:

• Create an absolutely-positioned iframe that covers all of the content on the page; you can use opacity on the iframe to "grey-out" everything it covers if you like. The iframe doesn't have to have any content, it's just there as a backdrop. This is usually called the "iframe shim" trick. Give the iframe a z-index higher than that of any other element on the page.
• Create an absolutely-positioned div on top of the iframe (higher in the z-order) containing your dialog box and the options the user has. Note that this is not within the iframe's document, it's part of your main page's DOM.
• When the user has selected an option, remove your div and iframe and do whatever else you need to do (go to another page, update things, etc.).

The iframe serves at least a couple of purposes:

• It lets you readily grey-out the underlying content
• It eats mouse clicks
• It deals with issues with form fields on Internet Explorer

EDIT: And for the record, the majority of JavaScript UI toolkits provide this sort of "modal" functionality, including jQuery UI, YUI, Dojo, Glow, ...

Answer 4

Why not just add something like this to the button's OnClientClick event?

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