Homemade Jquery lightbox, but z-index won't change back afterwards

So I'm trying to make a simple lightbox on a concert listings page. You click a listing (.performer), and then an info box (.lightboxinfo) gets overlaid while a semi-opaque white div lightens the rest of the screen (#whitepage). Then, you click anywhere on the screen, and the box and white div disappear.

Everything works fine except the final z-index changes. The box and white div become fully transparent, but the z-index clea开发者_开发技巧rly haven't been changed since I can't click on any links.

Anyone know what I'm doing wrong? Thanks so much!

The javascript is below:

$('.performer a').click(
    function(){
        $('.lightboxinfo').css('z-index','110').animate({opacity:'1'}, {queue:false,duration:500});
        $('#whitepage').css('z-index','100').animate({opacity:'0.4'}, {queue:false,duration:500});
    }); 
    $(document).click(
        function(){
            $('#whitepage').css('z-index','-100').animate({opacity:'0'},{queue:false,duration:100});
            $('.lightboxinfo').css('z-index','-110').animate({opacity:'0'},{queue:false,duration:100});
        });
});

Why mess around with the z-index when you can set 'display:none' after your opacity becomes 0?

// when appearing
$('#whitepage').css('opacity','0').show().animate({opacity:'0.4'}, 500);

// when disappearing
$('#whitepage').animate({opacity:'0'}, 100, function () {
    $('#whitepage').hide();
});

Also, each time you click on the performer link, you're adding another event handler to the document. You may want to do that only once, outside of the click and only if the whitepage is visible.

$('.performer a').click(function () {

});
$(document).click(function () {
    $('#whitepage:visible').animate(...
});

This is a bit difficult to answer as you haven't given the HTML and CSS, but there are a few things you should probably look at.

I assume your lightbox divs are positioned absolutely. Any (container) elements that you want to appear over them must be positioned relatively or absolutely or z-index will have no effect and relatively / absolutely positioned elements will always be on top of them.

You're animating the opacity manually, rather than using jQuery's built in fadeOut animation. Apart from giving compatibility with browsers that don't support opacity, fadeOut also sets the hidden element to display: none. This allows you to click on stuff that would otherwise be underneath the lightbox, whereas just reducing the opacity to 0 still leaves the element there and able to accept and block clicks. (So using fadeOut also means you'd no longer have to toggle the z-index.)

This is not directly related to the problem you mentioned, but both of the events you've set up will fire when you click on a .performer a link. (I think this is why you've prevented the animations from being queued: both will run together and the one that sets the opacity to 1 wins as it finishes last.) This does, however, stop the lightbox getting the z-index you want. To prevent this happening, you either need to set the close lightbox click event to #whitepage or stop the event propagating.

$('.performer a').click(function(event)
{
        $('.lightboxinfo, #whitepage').fadeIn(500);
        event.stopPropagation();
});