CSS popup div unclickable background content, work only in ie8?

Question

Before asking this question i saw the question: CSS background opacity with rgba not working in IE 8 but didn't work for me. I make a popup using only css. It works in ie9+ and mozilla25+ the css that i use to do that: HTML:

<div id="backgroundFilter">
    <div id="overBackgroundFilter"></div>
</div>

#backgroundFilter 
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(184, 184, 184, 0.5);
}

#overBackgroundFilter 
{
position: static;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 385px;
width: 400px;
background-color: #F8F8F8;
border-width: 6px;
border-color: #E0E0E0;
border-style: solid;
}

I change my css for ie8, it works for ie8 but it didn't for mozilla.In mozilla opacity is passed from backgroundFilter to overBackgroundFilter, i want that only backgroundFilter is trasparent and overBackgroundFilter not. Any ideas? Here is the css changed for ie8:

#backgroundFilter 
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #B8B9BB;
-moz-opacity: 0.50;
opacity: 0.50;
filter: alpha(opacity =50);
}

#overBackgroundFilter 
{
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 385px;
width: 400px;
background: #F8F8F8;
border-width: 6px;
border-color: #E0E0E0;
border-style: solid;
}

Thanks!

Now, I don't understand your problem, your fiddle looks exactly the same in Chrome, Safari, Firefox, IE11 and IE8 (if I add filter suggested by me). Here is updated fiddle - http://jsfiddle.net/HjJB6/4/ and demo link which I compared http://fiddle.jshell.net/HjJB6/4/show/ — Anton Boritskiy, Feb 26 '14 at 10:34
I don't know why don't work in my project your code for ie8! I try to fix it but i have the same problem... work in ie8 and not in mozilla or vicevera. Maybe is something else in my project! Thanks a lot — Milaci, Feb 26 '14 at 12:52
I fixed it checking the browser like this: if(explorer){change div id}else{other div id}. I try to fix via css but doesn't work! Your code is OK if i use only that code in explorer but in my project doesn't work! Thank's for your time! — Milaci, Feb 26 '14 at 14:28
Why i'm ban from stackoverflow? I make a question that just exist but is did't work for me! — Milaci, Mar 07 '14 at 12:26
1st please ask a question about that in meta.stackoverflow.com, and 2nd if you able to write comments - you are not banned ;) — Anton Boritskiy, Mar 07 '14 at 13:05
I'm able to write a comment but i'm not able to ask a question! In meta.stackoverflow.com i saw some question like mine but the answer is to edit my question and to hope that stackoverflow community appreceit it :(. — Milaci, Mar 07 '14 at 13:33

score 2 · Accepted Answer · edited May 23 '17 at 12:08

2

Consider using

#backgroundFilter {
  ...
  background: rgba(184, 184, 184, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7FB8B8B8', endColorstr='#7FB8B8B8'); /* IE8 */
}

Here is similar question CSS background opacity with rgba not working in IE 8

Here is jsFiddle with that fix - jsfiddle.net/HjJB6/4. And here is a demo link can be used for IE8 fiddle.jshell.net/HjJB6/4/show (main jsFiddle page doesn't support IE8).

edited May 23 '17 at 12:08

Community

1
1

answered Feb 26 '14 at 08:34

Anton Boritskiy

1,539
3
21
37

I saw that question but it didn't work for me because in ie8 my backgroundFilter div has no opacity!! In mozilla works for rgba(184, 184, 184, 0.5); It seems that if i make a change on my css works or in ie8 or in mozilla! – Milaci Feb 26 '14 at 08:45

CSS popup div unclickable background content, work only in ie8?

1 Answers1