fullscreen overlay with css/jquery

css, html, jquery

Solution

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/

Problem

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:

Original source