CODEWITHSUNDEEP
jquery
santa
santa

Reputation: 12512

Overlay layer with jQuery

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!

Upvotes: 4

Views: 11725

Answers (3)

Naftali
Naftali

Reputation: 146310

try this:

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

and if $("#getOverlay") is not there on DOM load try:

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

and change the 1st line of css to:

.overlay {

see working DEMO here

Upvotes: 1

CarlosZ
CarlosZ

Reputation: 8669

You should add the overlay directly to the html like <div id="overlay"></div>, add a display: none to the css definition and then on the on click handler, do $('#overlay').show(). Otherwise you'll be add a new div to the body every time you click the element.

Upvotes: 0

Craig
Craig

Reputation: 7671

It works for me in this jsfiddle:

http://jsfiddle.net/z8FmA/

Upvotes: 3

Related Questions