[Solved] AJAX CalendarExtender Modal Popup Problem - AJAX Calendar Extender hiding begind Modal Popup

I have used Ajax Modal popup extender for popup an the css for modal popup is as folows:

.modalBackground
{
    -webkit-border-radius: 12px 12px 23px 23px;
    border-radius: 12px 12px 23px 23px;
    -webkit-box-shadow: 12px 12px 12px 0 #946C10;
    box-shadow: 12px 12px 12px 0 #946C10;
    background-color: LightGrey;
    filter: alpha(opacity=80);
    opacity: 0.7;
    position:fixed;  
}

and the HTML for modal popup is as shown bellow:

<cc1:modalpopupextender id="ModalPopupExtender1" runat="server" targetcontrolid="btncomplains"
    popupcontrolid="panelstatus" backgroundcssclass="modalBackground" cancelcontrolid="ImageCancel1">
    </cc1:modalpopupextender>
<asp:Panel ID="panelstatus" GroupingText="Submit Details" BackColor="WhiteSmoke"
    Width="600px" runat="server" Style="border: thick solid #CCCCCC;">
    <div>
        <div align="right" style="padding: 2px; width: auto; height: 25px;">
            <asp:Image ID="ImageCancel1" runat="server" ImageUrl="~/images/close2.png" CssClass="image_hover"
                Width="25px" />
        </div>
        <asp:UpdatePanel ID="UpdatePanelpopup1" runat="server">
            <ContentTemplate>
                <table style="width: 580px">
                    <tr>
                        <td class="textalignment">
                            <asp:Label ID="lblserialno" runat="server" Font-Bold="True" Text="Serial Number :"></asp:Label>
                        </td>
                        <td class="auto-style5">
                            <asp:TextBox ID="txtserialno" runat="server" CssClass="textbox"></asp:TextBox>
                        </td>
                        <td class="tablealignmentcnlbtn">
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtserialno"
                                ErrorMessage="Please Enter Serial No" ForeColor="#FF3300" ValidationGroup="process"
                                Font-Size="Small"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="textalignment">
                            <asp:Label ID="lblpinno" runat="server" Font-Bold="True" Text="Pin Number :"></asp:Label>
                        </td>
                        <td class="auto-style5">
                            <asp:TextBox ID="txtpinno" runat="server" CssClass="textbox"></asp:TextBox>
                        </td>
                        <td class="tablealignment">
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtpinno"
                                ErrorMessage="Please Enter Pin No" ForeColor="#FF3300" ValidationGroup="process"
                                Font-Size="Small"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="textalignment">
                            <asp:Label ID="lbltransactionid" runat="server" Font-Bold="True" Text="Transaction ID :"></asp:Label>
                        </td>
                        <td class="auto-style5">
                            <asp:TextBox ID="txttransactionid" runat="server" CssClass="textbox"></asp:TextBox>
                        </td>
                        <td>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txttransactionid"
                                ErrorMessage="Please Enter TransactionId" ForeColor="#FF3300" ValidationGroup="process"
                                Font-Size="Small"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="textalignment">
                            <asp:Label ID="lblrechargedate" runat="server" Font-Bold="True" Text="Recharge Date :"></asp:Label>
                        </td>
                        <td class="auto-style5">
                            <asp:TextBox ID="txtrechargedate" runat="server" CssClass="textbox"></asp:TextBox>
                            <cc1:textboxwatermarkextender id="txtrechargedate_TextBoxWatermarkExtender" runat="server"
                                targetcontrolid="txtrechargedate" watermarktext="MM/DD/YYYY" watermarkcssclass="watermark">
                                </cc1:textboxwatermarkextender>
                            <cc1:filteredtextboxextender id="txtrechargedate_FilteredTextBoxExtender" runat="server"
                                filtertype="Custom,Numbers" targetcontrolid="txtrechargedate" validchars="/">
                                </cc1:filteredtextboxextender>
                            <cc1:calendarextender id="txtrechargedate_CalendarExtender" runat="server" enabled="True"
                                targetcontrolid="txtrechargedate" popupposition="BottomLeft">
                                </cc1:calendarextender>
                            <td class="tablealignment">
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtrechargedate"
                                    ErrorMessage="*" Font-Size="Small" ForeColor="#FF3300" ValidationGroup="process"></asp:RequiredFieldValidator>
                                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Please Enter Date In (MM/DD/YYYY) format"
                                    ControlToValidate="txtrechargedate" ForeColor="#FF3300" ValidationExpression="^((((0[13578])|([13578])|(1[02]))[\/](([1-9])|([0-2][0-9])|(3[01])))|(((0[469])|([469])|(11))[\/](([1-9])|([0-2][0-9])|(30)))|((2|02)[\/](([1-9])|([0-2][0-9]))))[\/]\d{4}$|^\d{4}$"
                                    ValidationGroup="process" Font-Size="Small"></asp:RegularExpressionValidator>
                            </td>
                    </tr>
                    <tr>
                        <td class="tablevalidation">
                            &nbsp;
                        </td>
                        <td class="auto-style5">
                            <asp:Button ID="btnpopsubmit" runat="server" CssClass="buttonsubmit" Font-Size="Medium"
                                Height="40px" OnClick="btnpopsubmit_Click" Text="Submit" ValidationGroup="process"
                                Width="100px" />
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <%-- </div>--%>
</asp:Panel>

I have tried all sorts of z-index but nothing seem to have worked i have changed z-index from 0 to 99999999 and nothing have changed and so i resorted to required field validators and watermark but pls help me to show that on top of modal popup and pls tell me if i am doing anything wrong I have also tried this script but didint worked:

<script language="javascript" type="text/javascript">
    function onCalendarShown(sender, args) {
        alert(sender._popupBehavior._element.style.tostring());
        sender._popupBehavior._element.style.zIndex = 9999999;

    }
</script>

pls help!!

I have seen amny website for this question but nothing seem to have worked and also there must be some error with css as i have described it above pls help on this!!