modalpopupextender 使用 .show() 时无法识别 BackgroundCssClass

Question

在后面的代码中使用 .show() 时，我无法显示 modalpopupextender。

当使用链接按钮时，模态弹出窗口完全按预期工作，但是当我从后面的代码调用它时，弹出窗口不是模态的，我可以在文本框中输入数据，单击其他按钮等。注意链接按钮通常会被隐藏 与 style="display:none;".

我正在尝试设置弹出窗口以根据单击的按钮显示消息。

我复制了下面的代码（删除了额外的表格细节以节省空间）。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="FrmTransaction.aspx.cs" Inherits="Cloud9.FrmTransaction" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />

    <div runat="server" id="PageDetailDiv" class="pagedetail">
        <asp:ValidationSummary runat="server" />

        <asp:Table runat="server" HorizontalAlign="Center" Width="80%">
            <asp:TableRow runat="server">
                <asp:TableCell runat="server">
                    <asp:Label runat="server" ID="lblMsg" CssClass="Msg" EnableViewState="false" />
                </asp:TableCell>
            </asp:TableRow>
            <asp:TableRow ID="trSearch" runat="server">
                <asp:TableCell runat="server">
                    <div align="left">
                        <asp:Label CssClass="formCapture" Text='Field' runat="server" ID="lblSearchField" AssociatedControlID="tbSearchField" />
                        <obout:OboutTextBox FolderStyle="Styles/Obout/TextBox" runat="server" ID="tbSearchField" Width="300px" />
                        <br />
                        <asp:Label CssClass="formCapture" Text='Lookup' runat="server" ID="lblSearch" AssociatedControlID="tbSearch" />
                        <obout:OboutTextBox FolderStyle="Styles/Obout/TextBox" runat="server" ID="tbSearch" Width="300px" />
                        <asp:Button ID="SearchButton" runat="server" Text="Find" CommandName="Search" CausesValidation="False"
                            OnCommand="btnClick_Search" CssClass="btnDefault" onMouseOver="this.CssClassName='btnDefaultHover'" onMouseOut="this.CssClassName='btnDefault'" />
                    </div>
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>

        <asp:Table runat="server" HorizontalAlign="Center" Width="80%">
            <asp:TableRow ID="trButton" runat="server">
                <asp:TableCell>
                    <div align="center">
                        <asp:Button id="btnInsert" runat="server" Text="Insert" CommandName="Insert" CausesValidation="True" OnCommand="btnClick_Insert"
                            CssClass="btnDefault" onMouseOver="this.CssClassName='btnDefaultHover'" onMouseOut="this.CssClassName='btnDefault'"/>
                        &nbsp; 
                        <asp:Button id="btnUpdate" runat="server" Text="Update" CommandName="Update" CausesValidation="True" OnCommand="btnClick_Update"
                            CssClass="btnDefault" onMouseOver="this.CssClassName='btnDefaultHover'" onMouseOut="this.CssClassName='btnDefault'"/>
                        &nbsp; 
                        <asp:Button id="btnDelete" runat="server" Text="Delete" CommandName="Delete" CausesValidation="False" OnCommand="btnClick_Delete"
                            CssClass="btnDefault" onMouseOver="this.CssClassName='btnDefaultHover'" onMouseOut="this.CssClassName='btnDefault'"/>
                        &nbsp; 
                        <asp:Button id="btnCancel" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="False" OnCommand="btnClick_Cancel" 
                            CssClass="btnDefault" onMouseOver="this.CssClassName='btnDefaultHover'" onMouseOut="this.CssClassName='btnDefault'"/>
                    </div>
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>

        <asp:Panel CssClass="modalPopup" runat="server" ID="pnlMessage" >
            <asp:Label runat="server" ID = "lblMessg" />
            <br />
            <asp:Button id="btnOKMessage" Text="OK!" Runat="server" UseSubmitBehavior="false" CausesValidation="false" OnCommand="btnClick_Cancel"
                class="btnPgeSmall" onMouseOver="this.className='btnPgeSmallHover'" onMouseOut="this.className='btnPgeSmall'" />
        </asp:Panel>

        <asp:LinkButton ID="UsedByModal" Text="here" runat="server" />
        <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="pnlMessage" TargetControlID="UsedByModal"
            BackgroundCssClass="modalBackground" CancelControlID="btnOKMessage" OkControlID="btnOKMessage" />
    </div>
</asp:Content>

CSS 的相关部分.....

.modalBackground {
    background-color:Gray;
    filter:alpha(opacityp);
    opacity:0.7;
}

.modalPopup {
    background-color:#F6F6EA;
    border-width:3px;
    border-style:solid;
    border-color:#c0c0c0;
    padding:3px;
    width:50%;
}

过去 3 天我一直在寻找答案，但现在完全陷入困境。任何帮助或指导将不胜感激。

Answer 1

这个类对我来说产生了正确的结果，你可以修改它以满足你的需要。

.modalBackground
{
    background-color: #000000;
    opacity: .15;
    filter: alpha(opacity=15);
    -moz-opacity: .15;
}

Answer 2

找到了！

为了找到问题，我重写了删除所有控件的页面，并从一个带有 1xTextbox 和 1xButton 以及 asp:Modalpopupextender 的简单页面开始，并确保一切都按预期工作。然后我开始向页面测试添加控件/功能。长话短说，问题在于 asp:ValidationSummary。

然后我在没有 ValidationSummary 控件的情况下重新设置了页面（如上所示），一切都很好。

我还不明白为什么这可以解决问题，但页面和弹出窗口可以正常工作。

如果有人有解释，我将不胜感激！

谢谢