日历扩展的模式弹出扩展ASP.NET不工作 [英] Calendar extender in modal popup extender ASP.NET not working
本文介绍了日历扩展的模式弹出扩展ASP.NET不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用用modalpopup扩展它弹出一个面板日历扩展，所以面板被弹出了包含日历扩展，但日历是每一件事情的背后，我试图改变的z-index但一切都是徒劳，似乎对我来说，这是在ASP.net AjaxToolKit.Any一个错误已对这个问题的想法，如果它可以解决？
编辑：
＆LT;风格类型=文/ CSS＆GT;
.modalBackground
{
背景颜色：灰色;
过滤器：α（不透明= 70）;
不透明度：0.2;
}
.ob_show_panelsholder
{
边框：1px的固体＃736F6E;
}
.enterzipCalenderCompliant {
PADDING-RIGHT：10px的; FLOAT：左/ *没有显示=内嵌* /
}
.ajax__calendar_container {z索引：1000; }＆LT; /风格＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
功能calendarShown（发件人，参数）{
sender.style.zIndex = 10005;
}
＆LT; / SCRIPT＆GT;
＆LT; ASP：的UpdatePanel ID =UpdatePanel1=服务器的UpdateMode =条件＆GT;
＆LT;＆的ContentTemplate GT;
＆LT; ASP：面板ID =_ pnlShowPersonalData=服务器＆GT;
＆LT;表类=STYLE1＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：图片ID =_ imgCurrentPP=服务器HEIGHT =100px的WIDTH =100像素/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =LABEL3=服务器文本=名字：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_ lblFirstName=服务器＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =Label5=服务器文本=姓：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_ lblLastName=服务器＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =Label7=服务器文本=生日：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_ lblBirthDate=服务器＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =Label10=服务器文本=手机号码：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_ lblMobileNumber=服务器＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =Label12=服务器文本=位置：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_ lblLocation=服务器＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =Label13=服务器文本=性别：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_ lblGender=服务器＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：按钮的ID =_ btnEditPersonalData=服务器文本=编辑个人资料/＆GT;
＆LT; ASP：ModalPopupExtender ID =_ btnEditPersonalData_ModalPopupExtender=服务器
DynamicServicePath =启用=真的TargetControlID =_ btnEditPersonalDataBackgroundCssClass =modalBackground
PopupControlID =_ pnlEditPersonalDataCancelControlID =_ btnCancel＆GT;
＆LT; / ASP：ModalPopupExtender＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / ASP：面板＆gt;
＆LT; ASP：面板ID =_ pnlEditPersonalData=服务器＆GT;
＆LT;表＆gt;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_名字=服务器文本=名字：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：文本框ID =_ txtFirstName=服务器＆GT;＆LT; / ASP：文本框＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_姓氏=服务器文本=姓：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：文本框ID =_ txtLastName=服务器＆GT;＆LT; / ASP：文本框＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_出生日期=服务器文本=出生日期：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆LT; TD类=ajax__calendar_container＆GT;
＆LT; ASP：文本框ID =_ txtBirthDate=服务器＆GT;＆LT; / ASP：文本框＆GT;
＆LT; ASP：MaskedEditExtender ID =_ txtBirthDate_MaskedEditExtender=服务器启用=真
的TargetControlID =_ txtBirthDateMaskType =日期ErrorTooltipEnabled =真MessageValidatorTip =真
面膜=99/99/9999＆GT;
＆LT; / ASP：MaskedEditExtender＆GT;
＆LT; DIV＆GT;
＆LT; ASP：CalendarExtender ID =_ txtBirthDate_CalendarExtender=服务器启用=真
PopupButtonID =_ btnCalendar的TargetControlID =_ txtBirthDate＆GT;
＆LT; / ASP：CalendarExtender＆GT;
＆LT; / DIV＆GT;
＆LT; ASP：ImageButton的ID =_ btnCalendar=服务器的ImageUrl =〜/图片/ calendar_button_b.jpg/＆GT;
＆LT;％ - ＆LT; IMG ALT =图标src =〜/图片/ calendar_button_b.jpgID =Image1的/＆GT; - ％GT; ＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_ ProfilePic=服务器文本=档案图片：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：文件上传ID =FileUpload1=服务器/＆GT;
＆LT; ASP：标签ID =Label1的=服务器＆GT;＆LT; / ASP：标签＆gt;
＆LT;％ - ＆LT; ASP：的RequiredFieldValidator ID =RequiredFieldValidator8=服务器的ControlToValidate =FileUpload1 - ％＆GT;＆LT;％ - 的ErrorMessage =*的ValidationGroup =注册＆GT;＆LT; / ASP：＆的RequiredFieldValidator GT; - ％GT;
＆LT; ASP：RegularEx pressionValidator ID =RegularEx pressionValidator1=服务器ValidationEx pression =^（（[A-ZA-Z] :) |（\\\\ {2} \\ W +）\\ $）（\\\\（\\ W [\\ W] *））（PNG？|。.JPG）$
的ControlToValidate =FileUpload1的ErrorMessage =请选择PNG或JPG文件格式
的ValidationGroup =一个UploadFile＆GT;＆LT; / ASP：RegularEx pressionValidator＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_移动电话号码=服务器文本=手机号码：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：文本框ID =_ txtMobileNumber=服务器＆GT;＆LT; / ASP：文本框＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_密码=服务器文本=密码：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：文本框ID =_ txtPassword=服务器＆GT;＆LT; / ASP：文本框＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; ASP：的UpdatePanel ID =UpdatePanel2=服务器的UpdateMode =条件＆GT;
＆LT;＆的ContentTemplate GT;
＆LT; ASP：面板ID =_ pnlLocation=服务器＆GT;
＆LT;表格的宽度=21％＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_国=服务器文本=国家：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; UC1：CountryListUC ID =CountryListUC1=服务器EnablePostBack =真EnableValidation =FALSE
OnListIndexChanged =CountrySelectedIndexChanged/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_ Governet=服务器文本=Governet：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; UC2：GovernateListUC ID =GovernateListUC1=服务器OnListIndexChanged =GovernateSelectedIndexChanged
启用=FALSEEnablePostBack =真EnableValidation =FALSE/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_区=服务器文本=区：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; UC3：DistrictListUC ID =DistrictListUC1=服务器启用=FALSEEnablePostBack =真
EnableValidation =FALSE/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / ASP：面板＆gt;
＆LT; /＆的ContentTemplate GT;
＆LT;＆触发器GT;
＆LT; ASP：AsyncPostBackTrigger控件ID =CountryListUC1事件名称=ListIndexChanged/＆GT;
＆LT; /触发器＆GT;
＆LT; / ASP：的UpdatePanel＆GT;
＆LT;表格的宽度=22％＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：标签ID =_性别=服务器文本=性别：＆GT;＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：DropDownList的ID =_ ddlGender=服务器＆GT;
＆LT; ASP：ListItem的值=1＆GT;男＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的值=2＆GT;女＆LT; / ASP：ListItem的＆GT;
＆LT; / ASP：DropDownList的＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; ASP：按钮的ID =_ btnSaveChanges=服务器的OnClick =_ btnSaveChages_Click文本=保存更改
的ValidationGroup =注册/＆GT;
＆LT; / TD＆GT;
＆LT; TD VALIGN =底＆GT;
＆LT; ASP：按钮的ID =_ btnCancel=服务器文本=取消/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / ASP：面板＆gt;
＆LT; /＆的ContentTemplate GT;
＆LT; / ASP：的UpdatePanel＆GT;
解决方案
CSS的解决方案，为我工作：
.ajax__calendar_container
{
位置：绝对的;
的z-index：100003重要;！
}
请务必使用！重要声明。没有它的z-index总是被更高的设置overwrited。您也应该检查的z-index CSS中的弹出对话框，它的背景。
I'm using a calendar extender in a panel which popup using modalpopup extender, so panel is poped up contains the calendar extender but the calendar is behind every thing, i tried to change the z-index but all in vain, seems to me that it is a bug in the ASP.net AjaxToolKit.Any one has an idea about this problem and if it can be solved?
Edit:
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.2;
}
.ob_show_panelsholder
{
border: 1px solid #736F6E;
}
.enterzipCalenderCompliant {
PADDING-RIGHT: 10px; FLOAT: left /*No display=inline*/
}
.ajax__calendar_container { z-index : 1000 ; }
</style>
<script type="text/javascript">
function calendarShown(sender, args) {
sender.style.zIndex = 10005;
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="_pnlShowPersonalData" runat="server">
<table class="style1">
<tr>
<td>
<asp:Image ID="_imgCurrentPP" runat="server" Height="100px" Width="100px" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="First name :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblFirstName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="Last name :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblLastName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="BirthDate :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblBirthDate" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label10" runat="server" Text="Mobile number :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblMobileNumber" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label12" runat="server" Text="Location :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblLocation" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label13" runat="server" Text="Gender :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblGender" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Button ID="_btnEditPersonalData" runat="server" Text="Edit Profile" />
<asp:ModalPopupExtender ID="_btnEditPersonalData_ModalPopupExtender" runat="server"
DynamicServicePath="" Enabled="True" TargetControlID="_btnEditPersonalData" BackgroundCssClass="modalBackground"
PopupControlID="_pnlEditPersonalData" CancelControlID="_btnCancel">
</asp:ModalPopupExtender>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="_pnlEditPersonalData" runat="server">
<table>
<tr>
<td>
<asp:Label ID="_FirstName" runat="server" Text="First name :" ></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_LastName" runat="server" Text="Last name :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtLastName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_BirthDate" runat="server" Text="Birth date :"></asp:Label>
</td>
<td class="ajax__calendar_container">
<asp:TextBox ID="_txtBirthDate" runat="server"></asp:TextBox>
<asp:MaskedEditExtender ID="_txtBirthDate_MaskedEditExtender" runat="server" Enabled="True"
TargetControlID="_txtBirthDate" MaskType="Date" ErrorTooltipEnabled="True" MessageValidatorTip="true"
Mask="99/99/9999">
</asp:MaskedEditExtender>
<div>
<asp:CalendarExtender ID="_txtBirthDate_CalendarExtender" runat="server" Enabled="True"
PopupButtonID="_btnCalendar" TargetControlID="_txtBirthDate">
</asp:CalendarExtender>
</div>
<asp:ImageButton ID="_btnCalendar" runat="server" ImageUrl="~/Images/calendar_button_b.jpg" />
<%-- <img alt="Icon" src="~/Images/calendar_button_b.jpg" id="Image1" />--%>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_ProfilePic" runat="server" Text="Profile picture :"></asp:Label>
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Label ID="Label1" runat="server"></asp:Label>
<%-- <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="FileUpload1"--%><%-- ErrorMessage="*" ValidationGroup="signup"></asp:RequiredFieldValidator>--%>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.png|.jpg)$"
ControlToValidate="FileUpload1" ErrorMessage="Please Select Png or Jpg File"
ValidationGroup="UploadFile"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_MobileNumber" runat="server" Text="Mobile number :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtMobileNumber" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_Password" runat="server" Text="Password :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtPassword" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="_pnlLocation" runat="server">
<table width="21%">
<tr>
<td>
<asp:Label ID="_Country" runat="server" Text="Country :"></asp:Label>
</td>
<td>
<uc1:CountryListUC ID="CountryListUC1" runat="server" EnablePostBack="True" EnableValidation="False"
OnListIndexChanged="CountrySelectedIndexChanged" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="_Governet" runat="server" Text="Governet:"></asp:Label>
</td>
<td>
<uc2:GovernateListUC ID="GovernateListUC1" runat="server" OnListIndexChanged="GovernateSelectedIndexChanged"
Enabled="False" EnablePostBack="True" EnableValidation="False" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="_District" runat="server" Text="District :"></asp:Label>
</td>
<td>
<uc3:DistrictListUC ID="DistrictListUC1" runat="server" Enabled="False" EnablePostBack="True"
EnableValidation="False" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CountryListUC1" EventName="ListIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<table width="22%">
<tr>
<td>
<asp:Label ID="_Gender" runat="server" Text="Gender :"></asp:Label>
</td>
<td>
<asp:DropDownList ID="_ddlGender" runat="server">
<asp:ListItem Value="1">Male</asp:ListItem>
<asp:ListItem Value="2">Female</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Button ID="_btnSaveChanges" runat="server" OnClick="_btnSaveChages_Click" Text="Save changes"
ValidationGroup="signup" />
</td>
<td valign="bottom">
<asp:Button ID="_btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
解决方案
CSS solution that worked for me:
.ajax__calendar_container
{
position :absolute;
z-index : 100003 !important;
}
Make sure to use !important declaration. Without it z-index was always overwrited by higher settings. You should also check z-index in css for popup dialog and it's background.
这篇关于日历扩展的模式弹出扩展ASP.NET不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
