Question

this might be a simple question but i can’t seem to figure it out.

i’m creating a popup window using jquery. when the edit button is clicked, a popup window appears and a blanket covers everything behind it to give the impression of a fade out.

i have it working properly, but the background blanket is only covering the visible screen space. meaning you can scroll down and see where the blanket ends.

i’m trying to get it to cover EVERYTHING on the page, even the stuff that you can’t see unless you scroll.

this is the css i currently have,

#blanket {  
 background-color:#111;
 opacity: 0.65;
 filter:alpha(opacity=65);
 height:100%;
 width:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:2000}

how would i get it to cover everything?

Answer 1

change position: absolute to position: fixed so that the overlay background (blanket) won’t scroll with the page.