Question

Hi while developing a lightbox for a website it seems I made an error in the creation of my code somewhere.If I click the lightbox two times it works normaly and everything is well.But when I try to open it a third time a bug seems to interfere.I have posted the code for the entire website on jsFiddle :

http://jsfiddle.net/Ywpdh/

Pay attention only on the “Login” button on the top right corner.When the Login button is clicked the lightbox appeares you can close it by clicking on the top right rectangle.The bug only appeares after the login button is clicked a third time.At this point the small rectangle seems to behave as if it’s container is given the overflow:hidden property something that is not true.I have tested the code on all modern browser I get the same bug.Can someone please tell me what’s going on?

Answer 1

Using firebug, the conatiner does get overflow: hidden when the exit div is clicked the 2nd time.

After reducing the code and commenting out It was the animation of width and height that are causeing the problem.

searching google for jquery aminate caused overflow: hidden i came accross this SO post

jQuery .animate() forces style "overflow:hidden"

So it appears you have to reset the overflow yourself

Updated your Fiddle

function lighbox(){
    var width = $(window).width() / 2 - ($('div.lightbox').width() / 2);
    var height = $(window).height()/2 - ($('div.lightbox').height() / 2);
    var body = $('body');
    body.css('overflowY','hidden');
    $('div#bg-lightbox').fadeTo('slow',0.9)
    $('div#lightbox').css({
        'left':width,
        'top':height,
        'overflow': 'visible'     // *** added this line
    }).stop()
        .animate({
            'width':'+=500px',
            'height':'+=250px',
            'left':'-=300px',
            'top':'-=200px',
            'opacity':'1'
        }, 'slow' , 'swing')