Geek asks and answers

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

Before asking this question, I saw a question: CSS background opacity with rgba, which doesn't work in IE 8 but doesn't work for me. I am creating a popup using only css. It works in ie9 + and mozilla25 + css, which I use for this: 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 to ie8, it works for ie8, but it is not for mozilla. In mozilla, opacity is passed from backgroundFilter to overBackgroundFilter, I want only backgroundFilter to be transparent, and overBackgroundFilter not. Any ideas? Here css is 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;
}

Thank!

+3
source share
1 answer

Consider using

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

CSS rgba, IE 8

jsFiddle - jsfiddle.net/HjJB6/4. IE8 fiddle.jshell.net/HjJB6/4/show ( jsFiddle IE8).

+2

More articles:


All Articles