打开灯箱错误答案

【问题标题】：LightBox bug on opening打开灯箱错误
【发布时间】：2012-03-29 06:06:32
【问题描述】：

您好，在为网站开发灯箱时，我似乎在某处创建代码时出错。如果我单击灯箱两次，它可以正常工作并且一切正常。但是当我尝试第三次打开它时一个错误似乎干扰了。我已经在 jsFiddle 上发布了整个网站的代码：

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

【问题讨论】：

无关提示：下拉菜单上的链接应该有display:block;，所以它们会展开以填满所有的LI
谢谢，我还是网络开发的初学者，欢迎大家提出建议
使用 firebug，conatiner 确实会溢出：第二次单击退出 div 时隐藏，但看不到它是从哪里得到的。添加溢出：在灯箱功能中设置宽度和高度时可见，但最好找出添加溢出：隐藏的原因/位置。

标签： javascript jquery

【解决方案1】：

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

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

在 google 中搜索 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')

【讨论】：