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

问题描述 投票：0回答：2

我在面板中使用日历扩展器，该面板使用 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
2个回答
0
投票

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

编辑：这是我使用的代码。我拿出了用户控件，这样我就可以调试页面，它似乎可以工作。这是一个屏幕截图

<%@ 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>
0
投票

对我有用的 CSS 解决方案：

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

确保使用！重要声明。如果没有它，z-index 总是会被更高的设置覆盖。您还应该检查 css 中的 z-index 是否有弹出对话框及其背景。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.