Question

Please have a look at this demo page that I cooked up a while ago:

http://www.s3maphor3.org/demo/hotbox/

This is a custom lightbox that is triggered upon holding the space key. The way it works is quite simple. There are two hidden divs on the page, one for the content of the lightbox and one that holds the darken layer (opacity 70%). The z-index of the darken layer is one less than that of the lightbox. Upon holding the space key, a simple jQuery script does a .show() on both divs.

This demo works fine, but it broke down when I used it in another project: IE7 and 8 did not show a 70% dark layer, instead it shows a solid black background. I spend many hours trying to check the differences between the original demo that works and the version I use in the other project. Eventually I nailed it: the difference is in the jQuery version.

The original demo uses jQuery 1.3.1 whilst in my new project I’m using jQuery 1.4.2. Something must have changed in the new jQuery library, but I’m having a hard time finding out what and how to work around it. I can stay on 1.3.1 but eventually I will have to fix this somehow.

Answer 1

It is kind of lame to answer my own question so quickly, but I found a workaround. Setting the opacity in javascript before showing it (although the CSS already has that rule) seems to do the trick:

$('#darken').css('filter', 'alpha(opacity=70)');
$('#darken').show(0);

This gives a tiny flickr on screen, so I’m open for better solutions.