• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1177
  • Last Modified:

css not working for modalpopup extender IE7

I am trying to use a modalPopup extender but am having problems with it displaying the correct colours from my CSS in IE7.  It works in Safari. Chrome and Firefox but not IE7.

I have a button:

<asp:Button ID="btnAddFolder" runat="server" Text="Add Folder"  OnClick="btnAddFolder_Click" />

A Panel

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Width="233px" style="display:none;" >
       <div align="center">
      <asp:Button ID="OkButton" runat="server" Text="OK" />
      <asp:Button ID="CancelButton" runat="server" Text="Cancel" />

My Extender

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnAddFolder" PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="OkButton" CancelControlID="CancelButton" />

and finally the CSS



.modalPopup {

Basically when i push the button i want my panel to popup and greyout the background of my main webpage.  My panel will have a yellow background.  At the moment the popup is displaying, the main webpage is still visiable (not greyed out) and the background is transparent which means i can still see the text from main page.
1 Solution
Alan WarrenCommented:
Hi Media01,
your modal popup actually works fine for me here, using ie8, at first I thought it was because I have a Conditional IF css block in my master page, but it worked even if created a new page that does not inherit the master page.

Although if I cause a compile error by removing an end tag for an asp control on the page, I get a few css related errors.
Error      1      Validation (CSS 2.0): 'filter' is not a known CSS property name.
Error      2      Validation (CSS 2.0): 'opacity' is not a known CSS property name.

Conditional IF
  <!--[if IE]>
  <style type='text/css' media='screen' lang='en-au'>
    .modalBackground {background-color:Gray;filter:alpha(opacity=70)}
    .modalPopup {background-color:yellow;border-width:3px;border-style:solid;border-color:Gray;padding:3px;width:500px;}



Find the attached jquery pop up. which will work in all the browsers.

Place all files in same folder.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now