Dialog Demo

Dialogs are popup in-page areas which are shown on top of the referencing page. They are modal, meaning they must be dealt with before returning to the calling page. Dialogs are useful for collecting information without breaking the flow by going to another page.

To define a dialog, control.dialog template must be called, and then a hidden div defined which defines the innards of the dialog. Finally, the dialog is shown via a javascript call. Here's a simple example: <![CDATA[ <link href="/lib/dialog/dialog.css" rel="stylesheet" type="text/css"/> <script src="/lib/dialog/dialog.js" type="text/javascript">;</script> <div id="testDlg" style="width: 400px; height: 300px; display: none" title="Simple Dialog Example"> this is a simple example! Hit escape to dismiss. </div> <script> var dlg1=new Dialog('testDlg'); </script> <input type="button" onclick="dlg1.show()" value="Click Me!"/> ]]>

The script and style is included and a hidden div containing the content is defined. A Dialog object is then created with the id of the content div and the dialog is shown on click.

If the hidden content div has a title attribute, it is used for the title of the dialog. If the content div has a height and a width defined, it is also used for the dialog. If no dimensions are given, it will fit to the content.

The javascript call to dlg1.show() causes the content, title width and height to be loaded from the source element into the dialog body. The dialog is then shown.

Buttons and more complex page interaction can be defined in the content, such as in the following (see source for details):

This example defines two buttons, one which hides the dialog and the other which adds the given text to a div and hides the dialog. To hide the dialog, call dlg.hide().

Dialogs may also be shown from a url. Instead of being predefined, dialog content can be pulled from a remote location. Here's an example.

There are many other things that may be done with dialogs. Take a look at the dialog source, or view the documentation.