Overlay with jQuery

Question

I am trying to create an overlay layer that completely covers my screen with a translucent layer when I click on an element. I am trying to add it to a 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); }); 

A layer works fine if I just put it in my document. For some reason, getting it there on a click is a problem.

---

UPDATED:

I just realized that I tested it under the IE tab (FF-plugin), which mimics an older version of IE. FF and IE9 are acting as intended. Older IEs do not seem to recognize transparency, so I changed 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; } 

Thank you all for your feedback!

Answer 1

This works for me in this jsfiddle:

http://jsfiddle.net/z8FmA/

Answer 2

try the following:

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

and if $("#getOverlay") not , on loading the DOM try:

 $("#getOverlay").live('click',function(){... 

and change the first line of css to:

 .overlay { 

see here work demo

Answer 3

You must add the overlay directly in the html, for example, <div id="overlay"></div> , add display: none to the css definition, and then make $('#overlay').show() in the on-click handler. Otherwise, you will add a new div to the body every time you click on an element.