Overlay in IE 7 to prevent messing with controls in background

Question

I haven't got a unique problem, but for the life of me I can't figure out what I'm doing wrong.

I have a page that has a series of sections. Part of the section is a little image. When the image is clicked, I want to show a custom control. Showing the control is trivial, set the z-index a bit higher to ensure the control is on top of everything.

But the user can still interact with the sections behind the control.

To stop that, I added a "blanket". Basically a div that is the size of the document with the following CSS (in jQuery syntax) -

{
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: $(document).height(),
  display: 'none',
  zIndex: 1,
  backgroundColor: '#FF0000'
};

Yeah...the background is red so I can see it for testing. I set opacity to 0.1 (light blur). I then set the z-index of my custom control to 2 so that it is on top of the blanket.

This works perfectly in FireFox, Chrome, and Safari, but not in IE.

The custom control is not a child of the blanket.

The goal is to have the following document covered by blanket with control on top of blanket to interact with it. This is what I get on all browsers except IE. On ie...it goes document with control and both are covered by the blanket.

Answer

scunliffe was the closest (answered in a comment I can't link to). The custom control is inside of a relatively positioned div (several down actually). the blanket was simply appended onto the end of the body. Therefore it was outside the relatively positioned div and started it's own z-index stack (as documented here). Since IE 6/7 are broken in this regard, no matter what I set the z-index to, it would always be below the blanket.

So I moved the blanket to be the first child inside the relatively positioned div. This isn't 100% complete yet because if you scroll (which I can't stop with this solution), the blanket div is only the height of the visible content. I now have to figure out how to get the complete height of the content (visible and non-visible).

Answer 1

Here is how we do oppacity on our project:

.SomeStyle
{
filter:alpha(opacity=10);
-moz-opacity:.10;
opacity:.10;
}

That tests fine on IE 6 & 7 and FF 2 & 3. I believe it works in Safari as well.

Answer 2

Make it a habit to include a much higher z-index. Use the following:

z-index:20000;

And of course, up the z-index on your custom control. The high z-index fixed my similar problem.

Answer 3

You dont mention what the custom control consists of however if you have a select element in your custom control then this causes modal issues in ie (cant remember if they fixed the issue in ie7). Anyway this info may help you resolve your problem. Youll need an iframe shim to prevent it showing through the overlay. Lots of scripts about to do this for you.

more info

and here

Answer 4

I had trouble with this too. The only way I found create a non-penetrable shield was to put a picture in the background of the DIV (a transparent GIF worked for me). And then you still have to intercept keyboard events to prevent navigating to the control.

Answer 5

Just to toss my hat in...

I just implemented this a short while ago and I used:

div#shade-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.7;
    filter: Alpha(opacity=70);
}

Obviously you could change or remove the background color. I was adding this div to the DOM through Javascript so I didn't need to worry about the z-index.

Known to work in FF and IE7.

Answer 6

scunliffe was the closest (answered in a comment I can't link to). The custom control is inside of a relatively positioned div (several down actually). the blanket was simply appended onto the end of the body. Therefore it was outside the relatively positioned div and started it's own z-index stack (as documented here). Since IE 6/7 are broken in this regard, no matter what I set the z-index to, it would always be below the blanket.

So I moved the blanket to be the first child inside the relatively positioned div. This isn't 100% complete yet because if you scroll (which I can't stop with this solution), the blanket div is only the height of the visible content. I now have to figure out how to get the complete height of the content (visible and non-visible).