Popup Control Displaying as Multiple Nested Modal Popups

Introduction

We all have used the ModalPopupExtender and understand how the control works. It displays a detail part as a modal, which means we cannot interact with another part of the page except the detail part. But there is a problem in ModalPopupExtender. When we show another ModalPopupExtender on the first one, it does not hide the first ModalPopupExtender. We can still interact with the first ModalPopupExtender.


Image Number 1. “Parent and child Dialog Box”

Here the first and second dialog boxes are active. We can access both. Sometimes it spoils the application logic.

So here I am solving this problem by a User Control named ModelPopupRelation. It sets the child modal popup on the parent modal popup. You can add multiple ModelPopupRelation controls to set multiple relations between modal pops. We can nest many modal pop controls up to any level.

Example

<uc1:ModelPopupRelation ID="ModelPopupRelation1" runat="server" ParentModelPopupID="mpeFirstDialogBox"
   ChildModelPopupID="mpeSecondDialogBox" Start="false" />

Background

Before starting the ModelPopupRelation control we should clarify some things related to modal pop functionality.

<asp:Button ID="btntargetControlOfmpeFirstDialogBox"
   runat="Server" Text="" Style="display: none;" />
<cc1:ModalPopupExtender ID="mpeFirstDialogBox" runat="server"
  TargetControlID = "btntargetControlOfmpeFirstDialogBox"
  PopupControlID = "pnlFirstDialogBox" CancelControlID="btnCloseFirstDialogBox"
  Backgrou BehaviorID="mpeFirstDialogBox">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlFirstDialogBox" runat="server" BorderStyle="Solid" BorderWidth="1"
             Style="width: 700px; background-color: White;  display: none; height: 400px;">
       <h1>  This is the first DialogBox</h1>
</asp:Panel>

In the code above ModalPopupExtender is displayed when the user clicks on the buttonbtntargetControlOfmpeFirstDialogBox or ModalPopupExtender is shown dynamically by the Show() method. The Button control btntargetControlOfmpeFirstDialogBox is required as the TargetControlID property for the ModalPopupExtender. The Panel named pnlFirstDialogBox shows the detail part. In an HTML Page this becomes:

<div id="pnlFirstDialogBox" style="left:624px; top: 27.5px; width: 35%; height: 400px; position: fixed; z-index: 10001;
background-color: white;">[includes detail part as you specified]</div>"

The background element that prevents you from interacting with other parts of the page during the modal popup display looks like this in HTML:

<div style="left: 0px; top: 0px; width: 1920px; height: 455px; position: fixed; z-index: 10000;"
id="mpeFirstDialogBox_backgroundElement"
class="ModalPoupBackgroundCssClass"></div>

ModalPopupExtender includes a property BackgroundCssClass for this background element.

ModelPopupRelation User Control

This control implements functionality that is not supported by ModalPopupExtender. It sets one popup on another popup control. It provides three properties as you can see in the following code.

<uc1:ModelPopupRelation ID="ModelPopupRelation1" runat="server" ParentModelPopupID="mpeFirstDialogBox"
ChildModelPopupID="mpeSecondDialogBox"
Start="false"
/>

1. ParentModelPopupID: The id of the first ModalPopupExtender. That shows the second modal popup.
   
   
2. ChildModelPopupID: The second modal popup control.
   
   
3. Start: By default it's true. It allows the control to set a relation between modal popups.

Server-side methods

To implement this there are the following server-side methods:

1. private String GetControlClientID(String modelPopupDialogBoxID)
   
   This function gets the Client id of the modal popup. We need this id for the Script code (client-side scripting).
   
   
2. private Control ModalPopupExtenderControlSearch(Control _Control, String ModalPopupExtenderID)
   
   This function searches the modal popup control in the entire page.
   
   You can see more details in the attached project. Both functions are fully commented.

Client-side Methods

1. function EndRequestHandler<%=FunctionUniqueName %>(sender, args)
   
   This function is called after an asynchronous postback is finished and control has been returned to the browser. This function calls the CreateRelation() function.
   
   
2. function CreateRelation<%=FunctionUniqueName %>(ParentModelPopupID, ChildModelPopupID)
   
   This function takes two arguments, the client id of the parent and the child modal popup control. It sets the z-index of the child modal popup control. That is the main logic of this User Control.
   
   
3. function Get_PopUpContrl<%=FunctionUniqueName %>(PopupControlID)
   
   This function searches the modal popup control using the PopupControlID.

Main Logic

Now I am describing the main logic of the User Control. When ModalPopupExtender is rendered, it generates the z-index. As shown in the following screen.


Image Number 2. “Parent Dialog Box”

In this image we can see that ModalPopupExtender generates a z-index: 10000 for the background control (div HTML control). The div HTML control that covers the back side controls of the modal popup. This is the rendered HTML for the backgroundElement control.

Background Element:


<div style="left: 0px; top: 0px; width: 1920px; height: 455px; position: fixed; z-index: 10000;"
id="mpeFirstDialogBox_backgroundElement"
class="ModalPoupBackgroundCssClass"></div>

Foreground Element:


<div id="pnlFirstDialogBox" style="left: 624px; top: 27.5px; width: 35%;
height: 400px; position: fixed; z-index: 10001; background-color: white;">
[includes detail part as you specified]
</div>


Image Number 3. “Parent and child Dialog Box”

As you can see in the preceding image (Image Number 3) that we need to make a relation of z-indexes as “N -> (N+1) -> (N+2) -> (N+3) for dialog boxes and background elements.

Concept

At the end of the document again I want to describe the concept of this control. We need to set a series of z-indexes for all the dialog boxes that open in a nested manner. You can add your own logic to set the z-index of all the dialog boxes and their background elements.


Image Number 4. “Parent and child Dialog Box”