c# - BackgroundCssClass 未与 ModalpopupExtender 一起应用

Question

我正在尝试创建此网页，以显示具有“主从”类型 View 的数据库。为此，我遵循本教程 http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html .

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

问题是:当我单击链接以显示 modalPopup 时，未应用 BackgroundCssClass，弹出窗口仅显示在屏幕的一 Angular ，而没有更改背景和不透明度。有人知道怎么回事吗？

代码如下:

CSS

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

Modalpopup 部分(正上方是显示数据库“主”部分的 gridview，它工作正常所以我没有包括它。

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