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">
</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!!