I am trying to create an overlay layer that will cover my screen entirely

Question

0

Asked: May 21, 20262026-05-21T02:27:41+00:00 2026-05-21T02:27:41+00:00

I am trying to create an overlay layer that will cover my screen entirely

0

I am trying to create an overlay layer that will cover my screen entirely with semi-transparent layer when an element is clicked. I’m struggling with appending it to the document:

#overlay { 
   background-image: url(../overlay.png);
   opacity: 0.5;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1000;
}

$("#getOverlay").click(function() {
    var overlay = $('<div id="overlay">');
    $('body').append(overlay);
});

The layer works fine if I just place in my document. Getting it there on click is the problem for some reason.

UPDATED:

I just realized that i was testing it under IE tab (FF plugin) which mimics an older version of IE. FF and IE9 act as intended. Older IE apparently does not recognize transparency, so I modified CSS:

#overlay { 
   background-image: url(../overlay.png);
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity: 0.5;
   opacity: 0.5;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 12000;
}

Thanks all for your feedback!