So, recently I came across a problem where I had wanted to open ModalPopup inside ModalPopup. Fortunately, there is a way - and it’s pretty easy to do! Let’s take a look.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Modal.aspx.cs" Inherits="Modal" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.modalBackground
{
background-color:#f5f5f5;
filter:alpha(opacity=80);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="A" runat="Server">
</asp:ScriptManager>
<%--Master Button--%>
<asp:Button ID="btnOpen" Width="200px" runat="server" Text="Open Parent" CssClass="button"
CausesValidation="False" OnClientClick="$find('mdlPopup').show(); return false;" />
<%--Hidden Button--%>
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<%--Modalpopup extender For Parent--%>
<ccl:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup"
PopupControlID="pnlParent" CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</ccl:ModalPopupExtender>
<%--Parent Panel--%>
<asp:Panel ID="pnlParent" Style="display: none; position: absolute; width: 500px;
border: solid 1px black; height: 400px; background-color: White; margin-left: 50px"
runat="server" CssClass="modalpopup">
<asp:UpdatePanel ID="updateParent" runat="Server">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Button ID="btnParent" runat="server" Text="Open Child" CssClass="button" Width="200px"
CausesValidation="False" OnClientClick="$find('mdlChild').show(); return false;" />
</td>
<td>
Gender
</td>
<td>
<asp:DropDownList ID="ddl" runat="Server" AutoPostBack="True" OnSelectedIndexChanged="ddl_SelectedIndexChanged">
<asp:ListItem Text="Male" Value="Male"></asp:ListItem>
<asp:ListItem Text="Female" Value="Female"></asp:ListItem>
</asp:DropDownList>
<asp:Label ID="lbl" runat="Server"></asp:Label>
</td>
</tr>
</table>
<%--Close Button For Parent Modal Popup--%>
<asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick="$find('mdlPopup').hide(); return false;" />
<%--Target Control Button For Child Modal--%>
<asp:Button ID="btnChildTarget" runat="server" Style="display: none" />
<ccl:ModalPopupExtender ID="mdlChild" runat="server" TargetControlID="btnChildTarget"
PopupControlID="pnlChild" CancelControlID="btnCloseChild" BackgroundCssClass="modalBackground">
</ccl:ModalPopupExtender>
<asp:Panel runat="server" ID="pnlChild" Style="display: none; width: 100%; border: solid 1px black;
height: 100%; background-color: White; margin-left: 10px">
<table>
<tr>
<td>
First Name
</td>
<td>
<asp:TextBox ID="txt" runat="Server"></asp:TextBox>
</td>
</tr>
</table>
<asp:Button ID="btnCloseChild" runat="server" Text="Close" OnClientClick="$find('mdlChild').hide(); return false;" />
<asp:Button ID="btnChild" runat="server" OnClick="btnChild_Click" Text="Send Value To Parent" /></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Modal : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnResult_Click(object sender, EventArgs e)
{
mdlPopup.Show();
}
protected void Button3_Click(object sender, EventArgs e)
{
mdlPopup.Show();
mdlChild.Show();
}
protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
{
lbl.Text = ddl.SelectedItem.Value;
}
protected void btnChild_Click(object sender, EventArgs e)
{
lbl.Text = txt.Text;
mdlChild.Show();
}
}