Modal Dialogs

Docs
Home Home | Reset Page Reset Page | Page created: 5/23/2012 8:58:02 AM
The ModalDialog class is a client class that shows an element on top of a shaded background giving the appearance of a modal dialog. The functionality is all client driven with a server control to wrap the client functionality optionally. You can make any element 'modal' including simple elements like images (great for 'working' animations) or more complete 'dialogs'.

Simple Message Display

The following is a simple pop up message that simply displays a notification dialog that echos back the content you've entered in the field below.

Enter a title for your dialog:


Enter a message to display in the dialog:

Input Dialog Box

The following pops up a dialog window that allows text entry. You can enter a value into the text field and then click the Save or cancel button to exit. A ClientDialogHandler() is called on any clicks that occur in the dialog and you can take appropriate action - such as picking up result values - in response to clicks. This dialog also uses a custom div to display a different overlay.

Generic Message Box without explicit HTML Elements

The following dialog box is generated with pure client script and doesn't require any HTML elements on the page to 'attach to'. Rather the static wwModalDialog.createDialog() creates a dialog on the fly and uses that for displaying the message box. Not as flexible as the full functionality since the display is fixed and generic, but it can be done with two lines of code.

Display a 'Working' Image

A common task is to lock out a screen while some operation that needs completion before you can move on is happening. This is very easy to do with $().modaldialog(). This example displays a loading image for 4 seconds before returning the page.

Pure Client Side Modal Dialog Box

This simple example demonstrates how you can create a 'dialog' template as plain HTML and dynamically feed header and content text into it using the jQuery ModalDialog plug-in.