使用CSS和Javascript的基本灯箱效果不起作用

我正在尝试使用JavaScript实现基本的Lightbox效果。 让我告诉你，我是JavaScript的初学者

我想要的是，当我点击链接时，灯箱效果应该接管这个动作。（也就是说，一个图像应该显示在页面的中心，背景是黑色的）

但有些人认为，谷歌Chrome/Firefox/甚至IE 9上都没有出现这种效果

查看我的JSFIDLE以了解更多详细信息

以下是主要的JavaScript代码：

$(".lightbox").click(function(){
    var overlayLink;
    overlayLink = $(this).attr("href");
    window.startOverlay(overlayLink);
    return false;

    function startOverlay(overlayLink) {
    $("body").append('<div class="overlay"></div><div class="container">    </div>').css({"overflow-y":"hidden"});
    $(".overlay").animate({"opacity":"0.6"}, 200, "linear");
    $(".container").html('<img src="'+overlayLink+'" alt="" />');

    $(".container img").load(function() {
        var imgWidth = $(".container img").width();
        var imgHeight = $(".container img").height();
        $(".container")
            .css({                "top":"50%","left:"50%","width":imgWidth,"height":imgHeight,"margin-top": -(imgHeight/2),"margin-left":-(imgWidth/2)
            })
            .animate({"opacity":"1"}, 200, "linear");
    });

         $(".overlay").click(function(){
    $(".container, .overlay")
    .animate({"opacity":"0"}, 200, linear, function(){
        $(".container, .overlay").remove();
     })
});

}

});

$（“.lightbox”）。单击（函数（）{
var超链接；
overlylink=$（this.attr（“href”）；
window.startOverlay（overlylink）；
返回false；
函数startOverlay（overlylink）{
$（“body”）.append（“”）.css（{“overflow-y”：“hidden”}）；
$（“.overlay”）.animate（{“不透明度”：“0.6”}，200，“线性”）；
$（“.container”）.html（“”）；
$（“.container img”）.load（函数（）{
var imgWidth=$（“.container img”）.width（）；
var imgHeight=$（“.container img”）.height（）；
$（“.container”）
.css（{“顶部”：“50%”，“左侧”：“50%”，“宽度”：imgWidth，“高度”：imgHeight，“页边顶部”：-（imgHeight/2），“左侧页边”：-（imgWidth/2）
})
.animate（{“不透明”：“1”}，200，“线性”）；
});
$（“.overlay”）。单击（函数（）{
$（“.container.overlay”）
.animate（{“不透明”：“0”}，200，线性，函数（）{
$（“.container.overlay”）.remove（）；
})
});
}
});

请有人帮我指出我所犯的错误

---

提前感谢。

您的代码中有大量的拼写错误

• .css（{“top”：“50%”，“left”：“50%”，“width”：

• 如果要使用

  $

---

请学习如何使用浏览器Javascript控制台查找bug，而不是仅仅将一半的工作代码发布到Stackoverflow中。

在

中的“top”：“50%”，“left:“50%”，

在

left

之后缺少一个

”

。是

“top:“50%”，“left:“50%”

问题在于我的JavaScript代码中的语法、格式和键入错误。 我现在已经调整好了。 我所有的脚本都运行良好

我已经将jquery文件添加到代码中。 有关详细信息，请查看JSFIDLE代码：

感谢“Johanes Jander”提供的宝贵建议。使用控制台调试错误确实帮助了我，现在经过多次尝试和错误，我终于对JavaScript代码进行了微调。这解决了我的问题。：）

Thanks guys for your help