This topic demonstrates how to build igDialog™ windows one into another.
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.
This topic contains the following sections:
You can show multiple igDialog widgets on a single page and they will appear properly, without the requirement of defining a relationship between them. All you need is to create a script that will close and open those dialogs. You can use a combination of normal igDialog and modal dialogs.
What the control does automatically is it detects the first HTML placeholder and initializes the first dialog widget at the bottom. Respectively, the last igDialog HTML placeholder will be for the top widget. The igDialog exposes API methods that grant access to the top dialogs and the ability to move dialogs to the top level if they are not there already.
Note: You cannot achieve this functionality using Ignite UI for MVC Dialog.
The following code demonstrates how to define your markup so that the second dialog will be shown on the top of the first:
In HTML:
<div id="dialogBottom”>
Parent HTML markup
</div>
<div id="dialogTop">
Child HTML markup
</div>
If you use the code above and define some additional HTML content, you can achieve the effect shown in the screenshot below. For more detailed information about the source of the image, please refer to the related sample at the bottom of the topic.
The igDialog exposes API methods that grant access to the top modal and not modal dialogs and enables the ability to move them to the top level if they are not there already.
The following table maps the desired functionality to the method that proposes it:
| In order to: | Use this method: | Parameters | Return type |
|---|---|---|---|
| Get reference to the top modal dialog | getTopModal() | None | object – reference to the igDialog |
| Check if dialog is modal and it is currently active | isTopModal() | None | boolean |
| Moves not a modal dialog to the top | moveToTop(e) | e – browser event | object – reference to the moved igDialog |
The code below demonstrates how to call one the above igDialog methods:
$(“#dialog”).igDialog(“moveToTop”, e);
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.
The following samples provide additional information related to this topic:
View on GitHub