Question

您正在为网站开发灯箱时，似乎我在某处创建了我的代码时出错了。如果我点击灯箱两次，它会正常工作，一切都很顺利。但是当我尝试第三次打开它时一个bug似乎干扰了。我已经在jsFiddle上发布了整个网站的代码：

仅关注右上角的“登录”按钮。单击“登录”按钮时，灯箱会显示，您可以通过单击右上方的矩形来关闭它。只有在单击登录按钮后才会显示错误第三次。在这一点上，小矩形似乎表现得好像它的容器被赋予溢出：隐藏属性不是真的。我在所有现代浏览器上测试了代码我得到了同样的bug。有人请告诉我什么是继续？

Answer 1

使用firebug，conatiner确实会溢出：第二次点击退出div时隐藏。

减少代码并注释掉它是导致问题的宽度和高度的动画。

搜索谷歌 jquery aminate导致溢出：隐藏我来到这个SO帖子

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

所以看来你必须自己重置溢出

更新了您的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')

打开LightBox的bug

1 个答案: