ModalPopupExtender z-index not working

I'm using a ModalPopupExtender, Modal1. This shows an animated gif & tells the user that the page is loading.
The z-index for Modal1 is 2001.
The z-index for the background of Modal1 is 2000.
This is working fine until a second modal is displayed.

I'm using a ModalPopupExtender, Modal2. This allows the user to add data & process a record.
The z-index for this Modal 2 is 1001
The z-index for the background of Modal2 is 1000

When the submit button is clicked in Modal2, Modal1 appears above Modal2 but the background for Modal1 is behind Modal2.

Is it possible to have the Background for Modal1 appear above Modal2 when the submit button is clicked?

My browser is Internet Explorer 8.0

AjaxControlToolKit Version 3.0.30930.28736

<asp:Panel ID="Panel1" runat="server" Style="display: none; width: 100%; height: 100%; z-index: 2001;"><asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server"><ProgressTemplate><div id="divPopup" class="PrProgress"><div id="innerPopup" class="PrContainer"><div class="PrHeader">
                            Loading, please wait...</div><div class="PrBody"><img src="../images/bar.gif" alt="loading..." /></div></div></div></ProgressTemplate></asp:UpdateProgress></asp:Panel><cc2:ModalPopupExtender
        BackGroundCssClass="modalBackground"
        ID="Modal1"
        runat="server"
        TargetControlID="Panel1"
        PopupControlID="Panel1"></cc2:ModalPopupExtender><asp:Panel ID="SingleReceiptPanel" runat=server Style="display: none; width: 100%; height: 100%; z-index:1001;"><div id="divPopup" class="POReceipt"><div id="Div1" class="PrContainer"><div class="BlackText8"><asp:UpdatePanel ID="UpdatePanelSingleReceipt" runat=server UpdateMode=Conditional><ContentTemplate>
                                  INSERT RECEIPT TALBLE CONTROLS/MARKUP HERE</ContentTemplate></asp:UpdatePanel></div></div></div></asp:Panel><cc2:ModalPopupExtender
        BackgroundCssClass="modalReceiptBackground"
        ID="Modal2"
        runat="server"
        TargetControlID="Button1"
        OkControlID="lbClose"
        PopupControlID="SingleReceiptPanel"></cc2:ModalPopupExtender>

.modalBackground 
{
  background-color: Gray;
  filter: alpha(opacity=80);
  opacity: 0.80; 
  z-index: 2000;
} 

.modalReceiptBackground 
{
  position: absolute;
  background-color: Purple;
  filter: alpha(opacity=80);
  opacity: 0.80; 
  z-index: 1000;
} 

.POReceipt
{
    display: block;
    position: absolute;
    width: 900px;
    height: 300px;
    left: 50%;
    top: 50%;
    margin-top: -75px;
    padding: 2px 3px;
}

.PrContainer
{
    border: solid 1px #808080;
    border-width: 1px 0px;
}

.PrHeader
{
    background: url(http://iseries.teamwbi.com/images/sprite.png) repeat-x 0px 0px;
    border-color: #808080 #808080 #ccc;
    border-style: solid;
    border-width: 0px 1px 1px;
    padding: 0px 10px;
    color: #000000;
    font-size: 9pt;
    font-weight: bold;
    line-height: 1.9;  
    white-space:nowrap;
    font-family: arial,helvetica,clean,sans-serif;
}

.PrProgress
{
    display: block;
    position: absolute;
    width: 242px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-left: -121px;
    margin-top: -100px;
    padding: 2px 3px;
}