BackgroundCssClass 未与 ModalpopupExtender 一起应用

Question

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

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

问题是：当我点击链接显示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

我有一个完全不同的原因导致这个问题，这是解决方案，我在这个非常有用的walk-through page 上找到了解决方案。

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

我在 .css 文件中打错字，导致无法读取背景样式。一旦 CSS 开始工作，弹出窗口就会变成模态并具有适当的背景。

Answer 2

也许您使用的是<asp:ScriptManager runat="server" /> 而不是<ajaxToolKit:ToolkitScriptManager runat="server" />

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

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