Child ModalPopupExtender 不会以 Parent ModalPopupExtender 为中心答案

【问题标题】：Child ModalPopupExtender will not center over Parent ModalPopupExtenderChild ModalPopupExtender 不会以 Parent ModalPopupExtender 为中心
【发布时间】：2013-07-18 19:58:51
【问题描述】：

我有一个 ASP.NET 4.5 应用程序，我必须在其中使用一系列模态窗口。第一个模态窗口允许用户输入一些数据，而第二个模态窗口用于确认目的。由于某种原因，第二个模态窗口不会居中对齐。我试过 {position: absolute; |重新定位模式=“无”| 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;
    }

【问题讨论】：

您能减少您的 sn-ps 以仅包含对问题很重要的 CSS 和标记吗？到目前为止，您发布的内容有很多噪音。
我稍微清理了一下sn-ps。这样好一点吗？
我注意到，如果我滚动页面，子模式会卡入正确的位置。不知道为什么。

标签： html asp.net .net css ajaxcontroltoolkit

【解决方案1】：

我发现了问题所在。我需要在我的 CSS 中添加以下 4 行：

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

【讨论】：