BackgroundCssClass pas appliquées avec ModalpopupExtender

Je suis en train de créer cette page web qui affiche une base de données avec un "Maître-Détail" type de vue. Pour ce faire, je suis ce tutoriel http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html.

La seule différence est que je ne suis pas à l'aide de ObjectDataSource, au lieu de cela je suis juste à l'aide de ma Base de données SQL.

Voici le problème: Lorsque je clique sur le lien pour afficher le modalPopup, le BackgroundCssClass n'est pas appliqué et que le popup s'affiche dans le coin de l'écran sans changer l'arrière-plan et de l'opacité. Quelqu'un sait ce qui se passe?

Voici le 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 partie (à droite ci-dessus c'est le gridview qui montre que le "Maître" de la section de la Base de données, cela fonctionne très bien donc je n'ai pas l'inclure.

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

OriginalL'auteur Isawpalmetto | 2010-09-30

  1. 2

    peut-être que vous utilisez <asp:ScriptManager runat="server" /> au lieu de <ajaxToolKit:ToolkitScriptManager runat="server" />

    voici un petit exemple de la "normale" d'utilisation, juste au cas où

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

    et dans le code de

    protected void btnShow_ServerSide_Click(object sender, EventArgs e)
{
    mdlPopup.Show();
}
protected void btnHide_ServerSide_Click(object sender, EventArgs e)
{
    mdlPopup.Hide();
}
    Ouais, c'était ça. Merci
    vous devriez peut-être d'attribution de la prime?
    Oups, j'ai pensé qu'il a fait cela une fois j'ai dit que c'était la réponse. Bounty attribué. Merci

    OriginalL'auteur y34h

  2. 0

    J'avais totalement différents à cause de ce problème, et voici la solution que j'ai trouvé sur ce très utile rendez-vous à travers la page.

    BackgroundCssClass: Le nom de la classe CSS qui doit être appliquée à l'arrière-plan de la fenêtre contextuelle. Une chose à noter ici est que si vous ne fournissez pas une classe CSS puis le modal popup ne fonctionne pas comme une boîte de dialogue modale c'est à dire On va être en mesure d'interagir avec les commandes au dos de la popup de contrôle, de sorte que son impératif de fournir une adresse de classe CSS nom de la valeur à la BackgroundCssClass de la propriété. Dans le ci-dessus par exemple, nous avons défini une classe CSS appelé “backgroundColor” dans la section d'en-tête de la page aspx. Veuillez noter que dans la classe CSS définition que nous avons appliquée “filtre” de la propriété de rendre le fond transparent.

    J'avais fait une faute de frappe dans le .fichier css, ce qui a empêché la lecture de l'arrière-plan de style. Dès que le CSS a été de travail, le popup est devenu modal et avait son bon fond.

    OriginalL'auteur DOK