disabling the parent modal popup when child modal popup is shown

disabling the parent modal popup when child modal popup is shown

I have a web form when the user hits Add contact it shows a modal popup to
collect information there is a grid on the modal popup and they can add
additional information through a child modal popup. Everything works good
except for when the child modal popup is shown I cant seem to get it to
disable the parent modal popup.
<asp:Panel runat="server" ID="ui_pnl_Parent" CssClass="modalPopup"
Style="display: block;" Width="504px">
<asp:ModalPopupExtender ID="ui_pnl_ParentPopupExtender" runat="server"
DynamicServicePath=""
Enabled="True" PopupControlID="ui_pnl_Parent"
TargetControlID="ui_btn_Popup"
BackgroundCssClass="modalBackGround"
RepositionMode="RepositionOnWindowResizeAndScroll">
</asp:ModalPopupExtender>
<asp:Panel runat="server" ID="ui_pnl_Child" CssClass="modalPopupChild"
Style="display: block;" Width="504px">
<asp:ModalPopupExtender ID="ui_pnl_ChildPopupExtender" runat="server"
DynamicServicePath=""
Enabled="True" PopupControlID="ui_pnl_Child"
TargetControlID="ui_btn_Popup2"
BackgroundCssClass="modalBackGroundChild"
RepositionMode="RepositionOnWindowResizeAndScroll">
</asp:ModalPopupExtender>
This I my CSS for the parent and the child
.modalPopup
{
background-color:white;
border-width:1px;
border-style:solid;
border-color:#284775;
padding:3px;
}
.modalBackGround
{
background-color: Silver;
filter:alpha(opacity=55);
opacity:0.7;
}
.modalPopupChild
{
background-color:white;
border-width:1px;
border-style:solid;
border-color:#284775;
padding:3px;
z-index: 110009;
}
.modalBackGroundChild
{
background-color: Silver;
filter:alpha(opacity=55);
opacity:0.7;
z-index: 110008;
}