BackgroundCssClass 未与 ModalpopupExtender 一起应用

Question

我正在尝试创建此网页，该网页显示具有“主详细信息”类型视图的数据库。为此，我按照本教程 http://mattberseth.com/blog/2008/04 /masterdetail_with_the_gridview.html。

唯一的区别是我没有使用 ObjectDataSource，而只是使用 SQL - DataBase。

问题是：当我点击链接显示 modalPopup 时，BackgroundCssClass 没有被应用，弹出窗口只是显示在屏幕的一角，而不改变背景和不透明度。有人知道发生了什么事吗？

这是代码：

CSS

<style type="text/css">
        TR.updated TD
        {
            background-color:yellow;
        }
        .modalBackground 
        {
            background-color:Gray;
            filter:alpha(opacity=70);
            opacity:0.7;
        }
    </style>    

Modalpopup 部分（正上方是显示数据库“主”部分的网格视图，这工作正常，所以我没有包含它。

        <asp:UpdatePanel ID="updPnlReservationDetail" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Button id="btnShowPopup" runat="server" style="display:none" />
                <ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server" 
                    TargetControlID="btnShowPopup" PopupControlID="pnlPopup" 
                    CancelControlID="btnClose"                      
                    BackgroundCssClass="modalBackground" />
                <asp:DetailsView ID="dvReservationDetail" runat="server" DataSourceID="mainTable" CssClass="detailgrid"
                    GridLines="None" DefaultMode="Edit" AutoGenerateRows="false" Visible="false" Width="100%">
                    <Fields>
                        <asp:BoundField HeaderText="LabName" DataField="labName" ReadOnly="true" />
                        <asp:TemplateField HeaderText="Email">
                            <EditItemTemplate>
                                <asp:TextBox ID="txtEmail" runat="server" Text="Hello" />
                            </EditItemTemplate>
                        </asp:TemplateField>

                    </Fields>
                </asp:DetailsView>
                <div class="footer">
                    <asp:LinkButton ID="btnSave" runat="server" 
                        Text="Save" OnClick="BtnSave_Click" CausesValidation="true"
                     />
                    <asp:LinkButton ID="btnClose" runat="server" 
                        Text="Close" CausesValidation="false" 
                    />
                </div>
                 </ContentTemplate>                
        </asp:UpdatePanel>

    </asp:Panel>

Answer 1

也许您正在使用 而不是

这里有一个小例子“正常”用法，以防万一

<asp:Button ID="btnShow_ClientSide" runat="server"
    Text="show client side" OnClientClick="return false" />
<asp:Button ID="btnShow_ServerSide" runat="server"
    Text="show server side" OnClick="btnShow_ServerSide_Click" />
<ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server"
    TargetControlID="btnShow_ClientSide"
    PopupControlID="pnlPopup" CancelControlID="btnHide_ClientSide"
    BackgroundCssClass="modalBackground" />
    <asp:Panel ID="pnlPopup" runat="server"
        BackColor="White" BorderColor="Black">
        <asp:Button ID="btnHide_ClientSide" runat="server"
            Text="hide client side" OnClientClick="return false" />
        <asp:Button ID="btnHide_ServerSide" runat="server"
            Text="hide server side" OnClick="btnHide_ServerSide_Click" />
    </asp:Panel>

并且在后面的代码中

protected void btnShow_ServerSide_Click(object sender, EventArgs e)
{
    mdlPopup.Show();
}
protected void btnHide_ServerSide_Click(object sender, EventArgs e)
{
    mdlPopup.Hide();
}

Answer 2

我对这个问题有一个完全不同的原因，这是解决方案，我发现这个解决方案非常有用 演练页面。

BackgroundCssClass：需要应用于弹出窗口背景的 CSS 类的名称。这里需要注意的一件事是，如果您不提供 CSS 类，那么模态弹出窗口将不会像模态对话框那样发挥作用，即人们将能够与弹出窗口后面的控件进行交互控件，因此必须向 BackgroundCssClass 属性提供有效的 CSS 类名称值。在上面的例子中，我们在 aspx 页面的标题部分定义了一个名为“backgroundColor”的 CSS 类。请注意，在 CSS 类定义中，我们应用了“filter”属性来使背景透明。

我在 .css 文件中犯了一个拼写错误，导致无法读取背景样式。一旦 CSS 开始工作，弹出窗口就会变成模态窗口并拥有正确的背景。