Overview

Easiest way to display a dialog on the client side

The fastest way to display a dialog is to set the dialog's ShowButton property. Once this property is set to an ID of a button control, clicking that button will display the dialog. When using this property, whether the dialog is displayed as modal or modeless is determined by IsModal property.

Displaying a dialog through code behind

To display a dialog through code behind, set the dialog's InitialState to EO.Web.DialogState.Visible.

Configure effects to popup and close a Dialog

EO.Web Dialog allows you to use cool effects to show and close a dialog to impress end user in your way. Simply specify ShowEffect and CloseEffect properties.

When a modal dialog is presented on the web page, to make it stand out, you can add shade color to the dialog's displaying background to smoothly grab end user's attention while displaying the dialog. Shaded background also implies that the user cannot continue until responding to the dialog. If you display the dialog as a modeless dialog, the shade color will not apply. Use BackShadeColor and BackShadeOpacity properties to specify the back shadow color and opacity.

Configure position to pop up a Dialog

By default, a Dialog is displayed at the center of the web page.

However, you can use any element on the web page as an anchor to show the dialog. Use AnchorElementID to specify the anchor element, then use OffsetX, OffsetY and ShowDirection to specify where to show the dialog.

Showing Dialog via Javascript

• Modal dialog requires the user to response before continuing. That is, when a modal dialog is displayed, other parts of the page are temporarily disabled. BackShadeColor and BackShadeOpacity can be used to specify a back shade that will be displayed for a modal dialog;
• Modeless dialog stays on the screen and allows user to do other activities;

eo_GetObject('Dialog1').show(true);  // Pop up as modal dialog 
eo_GetObject('Dialog1').show(false); // Pop up as modeless dialog

Close a Dialog and check return result

• Click on the close button located at top right corner of the dialog's header area if a close button is provided through CloseButtonUrl;
• Click on the accept button specified by AcceptButton property.
• Click on the cancel button specified by CancelButton property.
• Press ESC key;
• Use JavaScript to programmatically close the dialog.

If any of the above events happens, the dialog will be closed and you can use client side API to query the return result of the dialog. See client API's getResult function for details.

If you do not close the dialog programmatically, you can handle ClientSideOnEnd to perform tasks that you need to perform when the dialog closes.