Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

css not working for modalpopup extender IE7

Posted on 2010-11-17
3
Medium Priority
?
1,151 Views
Last Modified: 2012-05-10
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;" >
    Hello
       <div align="center">
      <asp:Button ID="OkButton" runat="server" Text="OK" />
      <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
   </div>
   </asp:Panel>

My Extender

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

and finally the CSS

.modalBackground
{
    background-color:Gray;  
    filter:alpha(opacity=80);
     opacity:0.8;

}


.modalPopup {
      background-color:#ffffdd;
      border-width:3px;
      border-style:solid;
      border-color:Gray;
      padding:3px;
      width:250px;
}

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.
0
Comment
Question by:Media01
3 Comments
 
LVL 26

Expert Comment

by:Alan Warren
ID: 34162044
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;}
  </style>
  <![endif]-->

hth


Alan

0
 
LVL 12

Expert Comment

by:jagssidurala
ID: 34183390
Find the attached jquery pop up. which will work in all the browsers.

Place all files in same folder.


Default.aspx.txt
jquery-1.4.2.min.txt
Popup.js.txt
India.jpg
0
 
LVL 29

Accepted Solution

by:
Kumaraswamy R earned 2000 total points
ID: 34281232
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Suggested Courses

971 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question