2011-12-21 140 views
0

我在一個使用modalpopup擴展器彈出的面板中使用日曆擴展器,所以面板被強化包含日曆擴展器,但日曆背後的每一件事,我試圖改變z-index但一切都是徒勞的,在我看來,這是ASP.net AjaxToolKit中的一個錯誤。任何人都有關於這個問題的想法,以及它是否可以解決?日曆擴展模式彈出式擴展ASP.NET不能正常工作

編輯:

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

回答

0

是日曆擴展的AJAX擴展還是你的意思是asp的日曆控件?無論哪種方式,我已經嘗試在你描述的相同情況下,它的作品。嘗試發佈您正在使用的一些代碼,以便我們可以看到問題所在,並獲得進一步的幫助。

編輯:這是我從你的代碼。我拿出usercontrols,所以我可以調試頁面,它似乎工作。下面是一個爲我工作一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> 
+0

是的,它是日曆ajax擴展和我編輯我的問題與代碼 – Islam 2011-12-21 14:36:31

+0

嘗試添加PopupPosition =「BottomRight」到您的日曆軟件 – Andres 2011-12-21 17:12:25

+0

仍然是同樣的問題,日曆背後的每件事情! – Islam 2011-12-21 17:39:58

0

CSS解決方案:

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

確保使用重要聲明!沒有它,z-index總是被更高的設置所超越。你還應該檢查css中的z-index彈出對話框,它是背景。