本文介绍了日历扩展的模式弹出扩展ASP.NET不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我用用modalpopup扩展它弹出一个面板日历扩展,所以面板被弹出了包含日历扩展,但日历是每一件事情的背后,我试图改变的z-index但一切都是徒劳,似乎对我来说,这是在ASP.net AjaxToolKit.Any一个错误已对这个问题的想法,如果它可以解决?

编辑:

 <风格类型=文/ CSS>
    .modalBackground
    {
        背景颜色:灰色;
        过滤器:α(不透明= 70);
        不透明度:0.2;
    }
    .ob_show_panelsholder
    {
        边框:1px的固体#736F6E;
    }
    .enterzipCalenderCompliant {
    PADDING-RIGHT:10px的; FLOAT:左/ *没有显示=内嵌* /
    }
    .ajax__calendar_container {z索引:1000; }< /风格>
<脚本类型=文/ JavaScript的>
    功能calendarShown(发件人,参数){
        sender.style.zIndex = 10005;
    }
< / SCRIPT>
< ASP:的UpdatePanel ID =UpdatePanel1=服务器的UpdateMode =条件>
    <&的ContentTemplate GT;
        < ASP:面板ID =_ pnlShowPersonalData=服务器>
            <表类=STYLE1>
                &所述; TR>
                    &所述; TD>
                        < ASP:图片ID =_ imgCurrentPP=服务器HEIGHT =100px的WIDTH =100像素/>
                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =LABEL3=服务器文本=名字:>< / ASP:标签>
                    < / TD>
                    &所述; TD>
                        < ASP:标签ID =_ lblFirstName=服务器>< / ASP:标签>
                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =Label5=服务器文本=姓:>< / ASP:标签>
                    < / TD>
                    &所述; TD>
                        < ASP:标签ID =_ lblLastName=服务器>< / ASP:标签>
                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =Label7=服务器文本=生日:>< / ASP:标签>
                    < / TD>
                    &所述; TD>
                        < ASP:标签ID =_ lblBirthDate=服务器>< / ASP:标签>
                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =Label10=服务器文本=手机号码:>< / ASP:标签>
                    < / TD>
                    &所述; TD>
                        < ASP:标签ID =_ lblMobileNumber=服务器>< / ASP:标签>
                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =Label12=服务器文本=位置:>< / ASP:标签>
                    < / TD>
                    &所述; TD>
                        < ASP:标签ID =_ lblLocation=服务器>< / ASP:标签>
                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =Label13=服务器文本=性别:>< / ASP:标签>
                    < / TD>
                    &所述; TD>
                        < ASP:标签ID =_ lblGender=服务器>< / ASP:标签>
                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:按钮的ID =_ btnEditPersonalData=服务器文本=编辑个人资料/>
                        < ASP:ModalPopupExtender ID =_ btnEditPersonalData_ModalPopupExtender=服务器
                            DynamicServicePath =启用=真的TargetControlID =_ btnEditPersonalDataBackgroundCssClass =modalBackground
                            PopupControlID =_ pnlEditPersonalDataCancelControlID =_ btnCancel>
                        < / ASP:ModalPopupExtender>
                    < / TD>
                < / TR>
            < /表>
        < / ASP:面板>
        < ASP:面板ID =_ pnlEditPersonalData=服务器>
            <表>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =_名字=服务器文本=名字:>< / ASP:标签>
                    < / TD>
                    &所述; TD>
                        < ASP:文本框ID =_ txtFirstName=服务器>< / ASP:文本框>
                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =_姓氏=服务器文本=姓:>< / ASP:标签>
                    < / TD>
                    &所述; TD>
                        < ASP:文本框ID =_ txtLastName=服务器>< / ASP:文本框>
                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =_出生日期=服务器文本=出生日期:>< / ASP:标签>
                    < / TD>
                    < TD类=ajax__calendar_container>
                        < ASP:文本框ID =_ txtBirthDate=服务器>< / ASP:文本框>
                        < ASP:MaskedEditExtender ID =_ txtBirthDate_MaskedEditExtender=服务器启用=真
                            的TargetControlID =_ txtBirthDateMaskType =日期ErrorTooltipEnabled =真MessageValidatorTip =真
                            面膜=99/99/9999>
                        < / ASP:MaskedEditExtender>
                        < D​​IV>
                        < ASP:CalendarExtender ID =_ txtBirthDate_CalendarExtender=服务器启用=真
                            PopupButtonID =_ btnCalendar的TargetControlID =_ txtBirthDate>
                        < / ASP:CalendarExtender>
                        < / DIV>
                        < ASP:ImageButton的ID =_ btnCalendar=服务器的ImageUrl =〜/图片/ calendar_button_b.jpg/>
<% - < IMG ALT =图标src =〜/图片/ calendar_button_b.jpgID =Image1的/> - %GT;                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =_ ProfilePic=服务器文本=档案图片:>< / ASP:标签>
                    < / TD>
                    &所述; TD>
                        < ASP:文件上传ID =FileUpload1=服务器/>
                        < ASP:标签ID =Label1的=服务器>< / ASP:标签>
                        <% - < ASP:的RequiredFieldValidator ID =RequiredFieldValidator8=服务器的ControlToValidate =FileUpload1 - %><% - 的ErrorMessage =*的ValidationGroup =注册>< / ASP:&的RequiredFieldValidator GT; - %GT;
                        < ASP:RegularEx pressionValidator ID =RegularEx pressionValidator1=服务器ValidationEx pression =^(([A-ZA-Z] :) |(\\\\ {2} \\ W +)\\ $)(\\\\(\\ W [\\ W] *))(PNG?|。.JPG)$
                            的ControlToValidate =FileUpload1的ErrorMessage =请选择PNG或JPG文件格式
                            的ValidationGroup =一个UploadFile>< / ASP:RegularEx pressionValidator>
                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =_移动电话号码=服务器文本=手机号码:>< / ASP:标签>
                    < / TD>
                    &所述; TD>
                        < ASP:文本框ID =_ txtMobileNumber=服务器>< / ASP:文本框>
                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =_密码=服务器文本=密码:>< / ASP:标签>
                    < / TD>
                    &所述; TD>
                        < ASP:文本框ID =_ txtPassword=服务器>< / ASP:文本框>
                    < / TD>
                < / TR>
            < /表>
            < ASP:的UpdatePanel ID =UpdatePanel2=服务器的UpdateMode =条件>
                <&的ContentTemplate GT;
                    < ASP:面板ID =_ pnlLocation=服务器>
                        <表格的宽度=21%>
                            &所述; TR>
                                &所述; TD>
                                    < ASP:标签ID =_国=服务器文本=国家:>< / ASP:标签>
                                < / TD>
                                &所述; TD>
                                    < UC1:CountryListUC ID =CountryListUC1=服务器EnablePostBack =真EnableValidation =FALSE
                                        OnListIndexChanged =CountrySelectedIndexChanged/>
                                < / TD>
                            < / TR>
                            &所述; TR>
                                &所述; TD>
                                    < ASP:标签ID =_ Governet=服务器文本=Governet:>< / ASP:标签>
                                < / TD>
                                &所述; TD>
                                    < UC2:GovernateListUC ID =GovernateListUC1=服务器OnListIndexChanged =GovernateSelectedIndexChanged
                                        启用=FALSEEnablePostBack =真EnableValidation =FALSE/>
                                < / TD>
                            < / TR>
                            &所述; TR>
                                &所述; TD>
                                    < ASP:标签ID =_区=服务器文本=区:>< / ASP:标签>
                                < / TD>
                                &所述; TD>
                                    < UC3:DistrictListUC ID =DistrictListUC1=服务器启用=FALSEEnablePostBack =真
                                        EnableValidation =FALSE/>
                                < / TD>
                            < / TR>
                        < /表>
                    < / ASP:面板>
                < /&的ContentTemplate GT;
                <&触发器GT;
                    < ASP:AsyncPostBackTrigger控件ID =CountryListUC1事件名称=ListIndexChanged/>
                < /触发器>
            < / ASP:的UpdatePanel>
            <表格的宽度=22%>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =_性别=服务器文本=性别:>< / ASP:标签>
                    < / TD>
                    &所述; TD>
                        < ASP:DropDownList的ID =_ ddlGender=服务器>
                            < ASP:ListItem的值=1>男< / ASP:ListItem的>
                            < ASP:ListItem的值=2>女< / ASP:ListItem的>
                        < / ASP:DropDownList的>
                    < / TD>
                < / TR>
                &所述; TR>
                    &所述; TD>
                        < ASP:按钮的ID =_ btnSaveChanges=服务器的OnClick =_ btnSaveChages_Click文本=保存更改
                            的ValidationGroup =注册/>
                    < / TD>
                    < TD VALIGN =底>
                        < ASP:按钮的ID =_ btnCancel=服务器文本=取消/>
                    < / TD>
                < / TR>
            < /表>
        < / ASP:面板>
    < /&的ContentTemplate GT;
< / ASP:的UpdatePanel>


解决方案

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不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-15 00:51