Question

我正在尝试创建此网页，该网页显示带有“Master-Detail”类型视图的数据库。为此，我正在学习本教程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部分（右上方是显示数据库“Master”部分的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();
}

Answer 2

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

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

我在.css文件中输入了一个拼写错误，导致无法读取背景样式。一旦CSS工作，弹出窗口就变成了模态并具有适当的背景。

BackgroundCssClass未应用ModalpopupExtender

2 个答案: