模式弹出扩展器 ASP.NET 中的日历扩展器不起作用

【问题标题】：Calendar extender in modal popup extender ASP.NET not working模式弹出扩展器 ASP.NET 中的日历扩展器不起作用
【发布时间】：2011-12-21 14:03:46
【问题描述】：

我在面板中使用日历扩展器，该面板使用 modalpopup 扩展器弹出，因此弹出的面板包含日历扩展器，但日历在所有事物的背后，我试图更改 z-index 但一切都是徒劳的，似乎对我来说这是 ASP.net AjaxToolKit 中的一个错误。有人知道这个问题是否可以解决？

编辑：

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

【问题讨论】：

    标签： asp.net ajaxcontroltoolkit calendarextender


    【解决方案1】：

    日历扩展器是 ajax 扩展器还是您的意思是 asp 日历控件？无论哪种方式，我都在您描述的相同情况下尝试过并且它有效。尝试发布一些您正在使用的代码，以便我们了解问题所在并提供进一步帮助。

    编辑：这是我从你那里使用的代码。我拿出了用户控件，这样我就可以调试页面了，它似乎可以工作。这是screenshot 

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="web.test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="smtest" runat="server"></asp:ScriptManager>
    <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" />
                        <ajaxToolkit:ModalPopupExtender ID="_btnEditPersonalData_ModalPopupExtender" runat="server" TargetControlID="_btnEditPersonalData" BackgroundCssClass="modalBackground" PopupControlID="_pnlEditPersonalData" CancelControlID="_btnCancel" />

                    </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>
                        <ajaxtoolkit:MaskedEditExtender ID="_txtBirthDate_MaskedEditExtender" runat="server" Enabled="True"
                            TargetControlID="_txtBirthDate" MaskType="Date" ErrorTooltipEnabled="True" MessageValidatorTip="true"
                            Mask="99/99/9999">
                        </ajaxtoolkit:MaskedEditExtender>
                        <div>
                        <ajaxtoolkit:CalendarExtender ID="_txtBirthDate_CalendarExtender" runat="server" Enabled="True"
                            PopupButtonID="_btnCalendar" TargetControlID="_txtBirthDate">
                        </ajaxtoolkit: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>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="_Governet" runat="server" Text="Governet:"></asp:Label>
                                </td>
                                <td>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="_District" runat="server" Text="District :"></asp:Label>
                                </td>
                                <td>

                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </ContentTemplate>
                <Triggers>

                </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" 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>
    </form>
</body>
</html>

    【讨论】：

    • 是的，它是日历 ajax 扩展器，我已经用代码编辑了我的问题
    • 尝试将 PopupPosition="BottomRight" 添加到您的日历扩展器中
    • 还是一样的问题，万事皆有日历！！
    • 奇怪！！似乎因为我使用的是用户控件而不是页面或者可能是浏览器，所以我尝试了 firefox 和 IE8。它在 FireFox 上可以正常工作吗？
    【解决方案2】：

    对我有用的 CSS 解决方案：

    .ajax__calendar_container   
{
    position :absolute;
    z-index : 100003 !important;
}

    确保使用 !important 声明。没有它，z-index 总是被更高的设置覆盖。您还应该检查 css 中的 z-index 以查看弹出对话框及其背景。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-10-22
      • 2011-02-26
      • 1970-01-01
      • 2016-11-29
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode