Modal Dialog Popup Samples

Sample Home | Reset Form

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 OK or cancel button to exit. Events fire and a messagebox confirms the value you've entered. This dialog also uses a custom div to display a different background 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.




Server Modal Dialog

Youc can also force the server to fire a modal dialog by calling the .Show function on a Modal Control from the server. The server will then embed the required code to load the page and the modal dialog will immediately overlay the page. Note that the underlying page content is still displayed.

These client side modal dialogs aren't exactly AJAX, but they are useful in presenting messages to the user in a more effective way than using an alert() or prompt() commands. The toolset provides for both a client and server side class that lets you pop up dialog boxes over shaded background

The server control allows creating a designable dialog that is a panel with embedded header and content areas that are set by client code. The server control when dropped adds the necessary layout to the page so all you have to do is change the layout and assign names. The server control inherits from DragPanel so the panel control is also draggable.

The control also can be driven entirely through client side code. There's even a simple method to create the dialog on the fly so there's no extra control requirements on the page. createDialog dynamically creates a simple dialog and lets you pop up a dialog with 2 lines of code.