孩子ModalPopupExtender不會集中在父ModalPopupExtender

我有一個ASP.NET 4.5應用程序，我必須使用一系列Modal窗口。第一個Modal窗口允許用戶輸入一些數據，而第二個Modal用於確認目的。出於某種原因，第二個Modal窗口不會居中對齊。我已經嘗試過{position：absolute; | RepositionMode =「無」| X =「0」Y =「0」| JS .add_shown}，它似乎沒有工作。也許我的設計有問題。我用我的CSS，HTML和Modal屬性修成沒有成功。我絕對需要一雙額外的眼睛。任何幫助將不勝感激。提前致謝。孩子ModalPopupExtender不會集中在父ModalPopupExtender

HTML

  <asp:UpdatePanel ID="pnlForm" runat="server"> 
       <ContentTemplate> 

        <br /><br /><br /> 

        <asp:Button ID="ibtSignee" runat="server" Text="Override" /> 

    <%-- PARENT --%> 

        <asp:Panel ID="pnlEndorse" runat="server" CssClass="endorse-panel" style="display: none;" Height="519px" Width="550px"> 

         <asp:Table runat="server" Width="100%"> 
          <asp:TableRow> 
           <asp:TableCell  ColumnSpan="5" Height="90px" Width="100%" /> 
          </asp:TableRow> 

          <asp:TableRow> 
           <asp:TableCell Width="48px"/> 

           <asp:TableCell  ColumnSpan="1" Height="60px" HorizontalAlign="Left"  VerticalAlign="Middle"> 
            <asp:ImageButton ID="ibtCancel" runat="server" ImageUrl="~/Images/CustomImage/frm-button-deny-off.png" /> 
           </asp:TableCell> 

           <asp:TableCell  ColumnSpan="1" Height="60px" HorizontalAlign="Center" VerticalAlign="Middle" /> 

           <asp:TableCell  ColumnSpan="1" Height="60px" HorizontalAlign="Right"  VerticalAlign="Middle"> 
            <asp:ImageButton ID="ibtAffirm" runat="server" ImageUrl="~/Images/CustomImage/frm-button-over-off.png" /> 
           </asp:TableCell> 

           <asp:TableCell Width="48px"/> 
          </asp:TableRow> 
         </asp:Table> 

    <%-- CHILD --%> 

         <asp:Panel ID="pnlConfirm" runat="server" CssClass="confirm-panel" style="display: none;" Height="203px" Width="550px"> 

         </asp:Panel> 


         <asp:Button ID="btnSecret" runat="server" style="display: none;" /> 


         <act:ModalPopupExtender ID="mpConfirm" 
               PopupControlID="pnlConfirm" 
               TargetControlID="btnSecret" 
               BackgroundCssClass="modal-circumvent" 
               RepositionMode="None" 
               runat="server"> 
         </act:ModalPopupExtender> 

    <%-- CHILD --%> 

        </asp:Panel> 


        <asp:Button ID="btnCovert" runat="server" style="display: none;" /> 

        <asp:HiddenField ID="hfEndorse" runat="server" Value="false" /> 


        <act:ModalPopupExtender ID="mpEndorse" 
              PopupControlID="pnlEndorse" 
              TargetControlID="btnCovert" 
              BackgroundCssClass="modal-circumvent" 
              runat="server" > 
        </act:ModalPopupExtender> 

    <%-- PARENT --%> 

       </ContentTemplate> 
       <Triggers> 
       </Triggers> 
      </asp:UpdatePanel>

CSS

html 
    { 
     overflow: auto; 
    } 

    body 
    { 
     width: 1024px; 
     font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif; 
     background: #8B94C4 url('../Images/CustomImage/Sunrise.png') top center no-repeat; 
     text-align: center; 
     font-size: .80em; 
     margin: 0 auto; 
     padding: 0px; 
     clear: both; 
    } 

    table 
    { 
     border-collapse: collapse; 
     text-align: center; 
    } 

    select 
    { 
     background-color: #E8FAFF; 
     border: 1px solid #7BA8B5; 
     font-family: "Courier"; 
    } 

    .modal-circumvent 
    { 
     background-image: url('../Images/CustomImage/endorse-modal.png'); 
    } 

    .endorse-panel 
    { 
     background-image: url('../Images/CustomImage/AppEndorse.png'); 
     background-repeat: no-repeat; 
     font-family: Arial; 
     font-size: 9pt; 
     color: #336699; 
    } 

    .confirm-panel 
    { 
     background-image: url('../Images/CustomImage/AppConfirm.png'); 
     background-repeat: no-repeat; 
     font-family: Arial; 
     font-size: 9pt; 
     color: #336699; 
    }

來源

2013-07-18 DotNet Student

你可以減少你的片段，只包括CSS和標記是重要的問題？迄今爲止發佈的內容中存在很多噪音。 –

我清理了片段。這是好一點嗎？ –

我注意到，如果我滾動頁面，子模式會捕捉到正確的位置。不知道爲什麼。 –

我想通了什麼問題了。我需要添加以下4行到我的CSS：

.confirm-panel 
    { 
     background-repeat: no-repeat; 
     background-image: url('../Images/CustomImage/AppConfirm.png'); 

     margin-right: auto !important; 
     margin-left: auto !important; 
     right: auto !important; 
     left: auto !important; 

     font-family: Arial; 
     font-size: 9pt; 
     color: #336699; 
    }

來源

2013-07-22 15:01:39

孩子ModalPopupExtender不會集中在父ModalPopupExtender

回答

相關問題