AJAX :: Calendar Extender Hiding Behind 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;">

[Code] ....

I have tried all sorts of z-index but nothing seem to have worked i have changed z-index from 0 to 99999999and nothing have changed and so I resorted to required field validators and watermark but how to show that on top of modal popup and 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>

I have seen many 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...