Modalpopupextender inside another modalpopupextender

I have have user control pages inside a modalpopupextender. Where modalpopextender2 is inside modalpopuextender1. when i click on the targetcontrol ID of modalpopextender page is displayed at the same time if i do modalpopextender2.show() i am getting a blank background page without any controls on it Please help me.

Below is my sample code

Main Page.ASPX

<div id="requiresearch" runat="server">
<ajax:ModalPopupExtender ID="ReqSearch1" runat="server" BackgroundCssClass="ModalPopupBG"
PopupControlID="SearchReq" BehaviorID="modalrequirementsearch" TargetControlID="searchPopup">
</ajax:ModalPopupExtender>
<asp:UpdatePanel ID="SearchReq" runat="server">
<ContentTemplate>
<uc1:requirementsearchpage ID="requirementsearch" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>

MainPage ASPX.CS

if (Req_ID.Text != "")
{
requirementsearch.bindgrid();
ReqSearch1.Show();

}

UserControlPage1.ASCX

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="requirementsearchpage.ascx.cs" Inherits="QUANTM.Controls.requirementsearchpage" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<%@ Register Src="~/Controls/requirementviewpage.ascx" TagName="requirementview1" TagPrefix="uc3" %>

<!-- REQUIREMENT SEARCH POPUP -->

<div id="requirementview" runat="server">
<ajax:ModalPopupExtender ID="modalRequirementView" BackgroundCssClass="ModalPopupBG"
runat="server" TargetControlID="button1" BehaviorID="modalrequirementdata" PopupControlID="ReqView">
</ajax:ModalPopupExtender>
<asp:UpdatePanel ID="ReqView" runat="server">
<ContentTemplate>
<uc3:requirementview1 ID="ucRequirementView" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>

<asp:Panel runat="server">

<div class="modal container" style="margin-left: 4px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" onclick="$find('modalrequirementsearch').hide(); return false;" aria-hidden="true"></button>

<h3><a class="brand" href="requirement.aspx">
<img src="assets/img/logo.png" alt="logo" style="padding-right: 20px" />
</a>Requirements</h3>
</div>
<div class="modal-body">
<div class="span5">

<div class="control-group">
<label class="control-label" style="width: 140px;">Search Requirement</label>
<div class="controls">
<asp:TextBox ID="searchTxt" runat="server" Width="60%" CssClass="span6 select2"></asp:TextBox>
<%--<input style="width: 60%" type="hidden" id="select2_sample3" class="span6 select2">--%>
</div>
</div>

</div>
<div class="span6 last">
<button class="btn blue" style="float: right"><i class="icon-list-ol"></i>Select All</button>
</div>
<div style="clear: both"></div>
<div style="height: 300px; overflow: scroll" data-rail-visible1="1">
<div class="portlet-body no-more-tables">
<asp:GridView ID="grvAllRequiremnt" runat="server" CssClass="table-bordered table-striped table-condensed cf" AutoGenerateColumns="false">

<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="reqSelectall" runat="server" AutoPostBack="true" CausesValidation="false" OnCheckedChanged="selectall_CheckedChanged" />
</HeaderTemplate>
<HeaderStyle BackColor="#0083CA" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemTemplate>
<asp:CheckBox ID="reqRowcheck" runat="server" />
</ItemTemplate>
</asp:TemplateField>

<asp:BoundField DataField="Requirement_Name" HeaderText="Requirement Name" HeaderStyle-CssClass="cf table-head" HeaderStyle-BackColor="#0083ca" />
<asp:BoundField DataField="requirement_ID" HeaderText="Requirement ID" HeaderStyle-CssClass="cf table-head" HeaderStyle-BackColor="#0083ca" />
<asp:BoundField DataField="Created_by" HeaderText="Created By" HeaderStyle-CssClass="cf table-head" HeaderStyle-BackColor="#0083ca" />
<asp:HyperLinkField HeaderText="View" HeaderStyle-CssClass="cf table-head" Text="View" HeaderStyle-BackColor="#0083CA" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
</Columns>
</asp:GridView>

</div>
</div>
</div>

<div style="clear: both"></div>
<div class="modal-footer">
<asp:Button ID="btnDone" runat="server" CssClass="btn blue" OnClick="btnDone_Click" Text="Done" />
<asp:Button ID="button1" OnClick="button1_Click" runat="server" CssClass="btn blue" Text="Done"/>
<asp:Button ID="btncre" runat="server" OnClick="btncre_Click" />

</div>
</div>
</asp:Panel>
<!-- END REQUIREMENT SEARCH POPUP -->

UserCOntrol ASCX.CS

protected void btncre_Click(object sender, EventArgs e)
{
modalRequirementView.Show();
}

usercontrol2 ASCX

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="requirementviewpage.ascx.cs" Inherits="QUANTM.Controls.requirementviewpage" %>
<!-- REQUIREMENT DATA POPUP -->
<asp:Panel runat="server">
<div class="modal container" style="margin-left: 4px;">
<div id="header1" class="modal-header">
<button type="button" class="close" data-dismiss="modal" onclick="$find('modalrequirementdata').hide(); return false; return false;" aria-hidden="true"></button>
<h3>Requirements</h3>
</div>
<div class="modal-body">
<div class="portlet" style="margin-top: 0px; margin-bottom: 0px">
<div class="portlet-body">
<div class="row-fluid">
<!--BEGIN TABS-->

<div class="control-group">
<label class="control-label">Req Name</label>
<div class="controls">
<asp:TextBox ID="ucReqName" runat="server" type="text" placeholder="Req Name" class="m-wrap small"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label">Req ID</label>
<div class="controls">
<asp:TextBox ID="ucReqID" runat="server" placeholder="Req ID" class="m-wrap small"></asp:TextBox>
</div>
</div>
<div class="control-group">
<label class="control-label">Req Type</label>
<div class="controls">
<asp:TextBox ID="ucReqType" runat="server" placeholder="Req Type" class="m-wrap small"></asp:TextBox>
</div>
</div>

</div>