BackgroundCssClass not being applied with ModalpopupExtender

Question

I am trying to create this webpage that shows a database with a "Master-Detail" type view. To do this I am following this tutorial http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html.

The only difference is that I am not using ObjectDataSource, instead I am just using my SQL - DataBase.

Here's the problem: When I click on the link to show the modalPopup, the BackgroundCssClass is not being applied, and the popup just shows up in the corner of the screen without changing the background and opacity. Anyone know whats going on?

Here's the code:

CSS

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

Modalpopup part (right above this is the gridview that shows the "Master" section of the Database, this works fine so I didn't include it.

        <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

maybe you are using <asp:ScriptManager runat="server" /> instead of <ajaxToolKit:ToolkitScriptManager runat="server" />

here's a little example of "normal" usage, just in case

<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>

and in the code behind

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