Ребенок ModalPopupExtender не будет сосредоточен над родительским ModalPopupExtender

Question

У меня есть приложение ASP.NET 4.5, в котором я должен использовать серию Модальных окон. Первое окно Modal позволяет пользователю вводить некоторые данные, а второй Modal используется для подтверждения. По какой-то причине второе окно Modal не будет выравниваться по центру. Я пробовал {position: absolute; | RepositionMode = "None" | X = "0" Y = "0" | JS .add_shown}, и он, похоже, не работает. Может быть, проблема с моим дизайном. Я без труда использовал свои CSS, HTML и модальные атрибуты. Мне определенно нужна дополнительная пара глаз. Любая помощь будет принята с благодарностью. Заранее спасибо.

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

Answer 1

я понял, что проблема была. Мне нужно добавить следующие 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; 
    }