fullscreen overlay with css/jquery

Question

i'm trying to make a "huge" div that fills all the viewport with opacity 0.4 or whatever. The problem is how to do it. I tried making a div with all my page content inside and give it this properties:

.div{
  width:100%;
  height:100%;
  background:#000;
  opacity:0.5;
}

since that didn't work, i tried to add z-index and put a high value but it didn't work either. any idea? i want to make something like this:

Answer 1

I think you're looking for something like this:

The CSS:

#fade-wrapper {
    display: none;
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.5);
}

Here's a fiddle: http://jsfiddle.net/hTQb8/1/