CSS Overlay Disabling clicks

1840dsgn · March 29th, 2009, 12:53 PM

Hi,

I am developing locally so unfortunately don't have a link at the moment.

I have a piece of javascript which adds an overlay to the my site to make it look like the lights have dimmed.

This is done using a png as a background-image, and works fine but for one issue.

Because the div with the backgroud image is on top of all other divs, it means I can't click anything underneath it. I know why this is but don't have a solution to it. I have z-indexded it below the rest of the site but then the effect is ruined by backgrounds on other divs.

So the problem is:

A div overlayed over the whole site, absolutely positioned, disables all actions underneath it as it is the top layer. (just like a lightbox, excpet my content is below the lightbox)

Does anyone have a solution?

Mike

1840dsgn · March 29th, 2009, 01:21 PM

I haven't found a solution to the problem.

I have found another way round it. My JS also now swaps in and out the problem BG images to ones with the darker bg. And uses a variable to say whether the lights are on or off.

Like...

Code:

// when lightSwitch is clicked
$("#lightSwitch").click(function () {

// If the lights are on
        if (lights == 0) {

// show the lights off div - overlay
            $("#lightsOff").show();

// set the variable to denote lights off
            lights = 1;       

// swap out the three problem background images for their darker versions     
            $('body').css('background', 'url(images/people_LO.gif) bottom left repeat-x');
            $('#header h1 a').css('background', 'url(images/logo_LO.gif) top left no-repeat');
            $('#container').css('background', 'url(images/whiteboard_LO.jpg) top left no-repeat');

// esle the lights must be off, so do the opposite to above
        } else {
            $("#lightsOff").hide();
            lights = 0;            
            $('body').css('background', 'url(images/people.gif) bottom left repeat-x');
            $('#header h1 a').css('background', 'url(images/logo.gif) top left no-repeat');
            $('#container').css('background', 'url(images/whiteboard.jpg) top left no-repeat');
        }
        return false;

Mike

beerspice · April 24th, 2009, 09:28 AM

I just ran into this same problem. What worked for me was setting the z-index on the links themselves, rather than the divs -- so the divs are behind the overlay, but the links actually render on top of it.

Code:

#overlay {
  z-index: 10;
  position: absolute;
}

div.contentBehindOverlay a {
  z-index: 11;
  position: relative;  
}