使用CSS和Javascript不工作的基本燈箱效果

-2

我想要使用JavaScript實現基本燈箱效果。那麼讓我告訴你，我是一個JavaScript的初學者。使用CSS和Javascript不工作的基本燈箱效果

我要的是，當我點擊鏈接，燈箱效果應該接管行動。（i..ea圖像應顯示在頁面的中心，tranperant黑色背景）

但一些如何這樣的效果並不/甚至在IE 9

檢查我的jsfiddle更多細節

發生在谷歌的Chrome/Firefox的這裏是主要的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(); 
    }) 
}); 

} 

});

請有人幫助我指出我正在做的確切的錯誤。

在此先感謝。

來源

2016-02-13 Aditya Manjrekar