igDialog Show and Hide

Topic Overview

Purpose

This topic demonstrates how to configure the igDialog™ so that it can be opened and closed and how to perform these actions.

Required background

The following topics are prerequisites to understanding this topic:

• igDialog Overview: The topic introduces the user to the igDialog control’s main features.

• Adding igDialog: This topic demonstrates how to add the igDialog control to a web page.

In this topic

• Control Configuration Summary
• Configure igDialog to Allow Closing
  • Property and Method Settings
  • Example
• Hide igDialog
  • Code
  • Example
• Show igDialog
  • Code
• Related Content
  • Topics
  • Samples

Control Configuration Summary

The following table lists the configurable aspects of the igDialog control. Additional details are available after the table.

Configure igDialog to Allow Closing

The table below demonstrates which properties need to be configured in order to be able close the igDialog control using the control UI. Note that both of them are set with the desired values by default.

Property and Method Settings

The following table maps the desired hiding feature to property settings:

Example

The screenshot below demonstrates how the igDialog looks as a result of the settings above:

Hide igDialog

As a result of the configuration from the previous paragraph, you will be able to close the dialog window using the button at the top right corner of the header. Using the Esc key is the other option that can be configured for the control, using the directions in the table below.

If you have both showCloseButton and closeOnEscape disabled, then you can hide the control using its API.

Code

The following code demonstrates how to close the igDialog using its API:

In JavaScript:

$('#igDialog).igDialog("close");

Example

The screenshot below shows you the position of the close button:

Show igDialog

The only possible way to show the igDialog is using its API.

Code

The following code demonstrates how to show the igDialog using its API:

In JavaScript:

$('#igDialog).igDialog("open");

Related Content

Topics

The following topics provide additional information related to this topic:

• igDialog Overview: The topic introduces the user to the igDialog control’s main features.

• Adding igDialog: This topic demonstrates how to add the igDialog control to a web page.

Samples

The following samples provide additional information related to this topic:

• Basic Usage: This sample shows you how to configure the igDialog height, width and state.