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