Click here to Skip to main content
13,298,551 members (51,640 online)
Click here to Skip to main content
Add your own
alternative version


30 bookmarked
Posted 15 Feb 2013

ASP.NET Popup Control Displaying as multiple nested modal popups

, 26 Apr 2013
Rate this:
Please Sign up or sign in to vote.
This article describes using web modelpop extender as Windows model popup dialogbox.


We all have used the ModalPopupExtender and know the working of this control. It displays a detail part as a model, 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 No. 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 model popup on the parent model popup. You can add multiple ModelPopupRelation controls to set multiple relations between model pops. We can nest many model pop controls to any level.


<uc1:ModelPopupRelation ID="ModelPopupRelation1" runat="server" ParentModelPopupID="mpeFirstDialogBox"

   ChildModelPopupID="mpeSecondDialogBox" Start="false" />


Before starting the ModelPopupRelation control we should clear some things related to model 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">
<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> 

In the above code ModalPopupExtender is displayed when the user clicks on the button btntargetControlOfmpeFirstDialogBox 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 model popup display looks like this in HTML:

<div style="left: 0px; top: 0px; width: 1920px; height: 455px; position: fixed; z-index: 10000;"



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 below code.

<uc1:ModelPopupRelation ID="ModelPopupRelation1" runat="server" ParentModelPopupID="mpeFirstDialogBox" 



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

Serverside methods:  

To implement this there are some server side method :

  1. private String GetControlClientID(String modelPopupDialogBoxID)
  2. According this function gets the Client id of the model popup. We need this id in JavaScript code (client side scripting).

  3. private Control ModalPopupExtenderControlSearch(Control
    _Control, String ModalPopupExtenderID)
  4. This function searches the model popup control into the whole page. 

You can see more detail in the attached project. Both functions are fully commented.

Client  Side Methods:

  1. function EndRequestHandler<%=FunctionUniqueName %>(sender, args)
  2. This function is called after an asynchronous postback is finished and control has been returned to the browser. This function calls CreateRelation() function. 

  3. function  CreateRelation<%=FunctionUniqueName %>(ParentModelPopupID, ChildModelPopupID)
  4. This function takes two arguments ,the client id of the parent and child model popup control. It sets the z-index of the child model popup control. That is the main logic of this User Control.

  5. function Get_PopUpContrl<%=FunctionUniqueName %>(PopupControlID)
  6. This function searches the model popup control by the help of 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 below screen.

Image No. 2. “Parent Dialog Box”

In this image we can see that ModalPopupExtender generates z-index : 10000 for the background control(div html control). The div html control that covers the back side controls of the model 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;"



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]

Image No. 3. “Parent and child Dialog Box”

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


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


Image No. 4. “Parent and child Dialog Box” 


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Girish Nama
Software Developer
India India
I'm a software engineer living in Jaipur.I have been designing and developing business solutions for the Insurance and Education industries since 2007.I like to learn new technologies and make them easier for all.

You may also be interested in...


Comments and Discussions

GeneralGreat idea Pin
Member 96949656-Feb-14 2:26
memberMember 96949656-Feb-14 2:26 
GeneralRe: Great idea Pin
Girish Nama9-Oct-14 19:58
memberGirish Nama9-Oct-14 19:58 
GeneralMy vote of 5 Pin
nachtigal8-Jul-13 11:10
membernachtigal8-Jul-13 11:10 
GeneralNice Article Pin
jiteshjain17-Feb-13 20:04
memberjiteshjain17-Feb-13 20:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171207.1 | Last Updated 26 Apr 2013
Article Copyright 2013 by Girish Nama
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid