Pourquoi ModalPopupExtender ne fonctionne pas lorsque je déplace le style de son panneau cible de codé en dur vers CSS?

Question

J'ai un ModalPopupExtender mis en place sur une page et fonctionne très bien. Il est lié à un panneau avec des attributs de style codés en dur dans son tag. J'essaie d'obtenir tous les styles de mon balisage en CSS, mais quand je déplace ces styles dans une classe, la popup ne fonctionne pas. Que se passe-t-il?

Styles en CSS:

.class1 
{ 
    border: solid 1px black; 
    display: none; 
    width: 700px; 
    height: 400px; 
    background-color: gray; 
    overflow: scroll; 
} 
.class2 
{ 
    background-color: White; 
    height: 90%; 
    width: 95%; 
} 
.backgroundClass 
{ 
    background-color: gray; 
    filter: alpha(opacity=70); 
    opacity: 0.7; 
} 

Panel:

<asp:Panel ID="pnlModalContainer" runat="server" CssClass="class1"> 
    <asp:Panel ID="pnlModalHandle" runat="server"> 
     <table cellpadding="0" cellspacing="0" border="0" width="650px"> 
      <tr> 
       <td> 
        Content Here&nbsp;|&nbsp; 
        <asp:Label ID="lblTitle" runat="server" Text=""></asp:Label> 
       </td> 
      </tr> 
     </table> 
    </asp:Panel> 
    <div style="padding-left: 25px;"> 
     <table cellpadding="1" cellspacing="0" border="0" class="class2"> 
      <tr valign="top"> 
       <td> 
        <asp:UpdatePanel ID="udpPopups" runat="server"> 
         <ContentTemplate> 
          ...content here... 
         </ContentTemplate> 
        </asp:UpdatePanel> 
       </td> 
      </tr> 
      <tr valign="bottom"> 
       <td align="right" style="padding-bottom: 5px; padding-right: 5px;"> 
        <asp:Button ID="btnModalOk" runat="server" Text="Ok" />&nbsp;&nbsp; 
        <asp:Button ID="btnModalCancel" runat="server" Text="Cancel" CausesValidation="false" /> 
       </td> 
      </tr> 
     </table> 
    </div> 
</asp:Panel> 

Et mPE:

<cc1:ModalPopupExtender ID="mpeAction" runat="server" PopupControlID="pnlModalContainer" 
TargetControlID="fakeButton" BackgroundCssClass="backgroundClass" DropShadow="false" 
PopupDragHandleControlID="pnlModalHandle" RepositionMode="RepositionOnWindowResizeAndScroll" /> 

Ceci est en ASP .NET 2.0. Mis en place comme ça, je vois l'arrière-plan apparaître, mais le popup ne s'affiche pas. Mais si je déplace le contenu de class1 vers le balisage en tant que style, cela fonctionne très bien. La fenêtre contextuelle est affichée via Javascript à partir de VB code-behind, en utilisant ScriptManager.RegisterStartupScript(). MISE À JOUR: J'ai déjà vu cela sur d'autres contrôles; Les contrôles de la boîte à outils AJAX semblent aimer leurs styles de mise en page en ligne, pas dans une feuille de style. Pourquoi est-ce?

Answer 1

Il est possible que la spécificité des styles de la feuille de style soit inférieure à la spécificité des styles en ligne. Essayez d'ajouter !important à la fin de chaque valeur de propriété. Comme dans:

.class1 
{ 
    border: solid 1px black !important; 
    display: none !important; 
    width: 700px !important; 
    height: 400px !important; 
    background-color: gray !important; 
    overflow: scroll !important; 
} 
... 

Si cela change des choses, alors vous avez besoin d'un sélecteur "plus spécifique" que ".class1".

Voir: CSS Specificity