html - 子 ModalPopupExtender 不会以父 ModalPopupExtender 为中心

标签 html asp.net .net css ajaxcontroltoolkit

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

最佳答案

我想出了问题所在。我需要在我的 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;
    }

关于html - 子 ModalPopupExtender 不会以父 ModalPopupExtender 为中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17732800/

相关文章:

.net - 以 "self learner"身份申请 .net 职位

c# - 如何使用 C# 获取打印作业状态

html - 在 :hover full 应用显示 block

javascript - History.js 在 Internet Explorer 中不工作

javascript - 使用 MediaSource 扩展播放视频播放列表

c# - 如何在 C# 中从字符串中分离整数值并将其存储到变量中

javascript - 在从 PHP 服务器返回的 HTML 之间放置内容(或广告)?

c# - 如何使用 c# 在 asp.net 中的数据库中在我的网页中显示我的 docx 文件数据?

c# - 分解一个 asp.net web 应用程序

c# - .NET 核心 : How to use csproj-based projects alongside project. JSON?