Question

我正在尝试使用JavaScript实现Basic Lightbox效果。好吧，让我通知你，我是JavaScript的初学者。

我想要的是，当我点击链接时，灯箱效果应该接管动作。（我的图像应该显示在页面的中央，带有透明的黑色背景）

但有些人认为Google Chrome / Firefox /甚至在IE 9上没有发生这种效果

检查我的jsfiddle以获取更多详细信息

这是主要的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();
     })
});

}

});

请有人协助我指出我正在做的确切错误。

先谢谢。

Answer 1

您的代码中存在大量拼写错误

.css({"top": "50%","left: "50%","width":
如果要使用$

请了解如何使用Browser Javascript控制台查找错误，而不是仅仅将半工作代码发布到Stackoverflow。

Answer 2

在"top":"50%","left:"50%" "之后，您错过了left "top":"50%","left":"50%"。是css。

Answer 3

问题在于我的JavaScript代码中的语法，格式，输入错误。我现在已经很好地调整了它。我的所有剧本都运行良好。

我已将jquery文件添加到代码中。检查Jsfiddle代码以获取详细信息：

https://jsfiddle.net/Addle/z58jzydj/20/

Thanks guys for your help

基本的LightBox效果使用CSS和Javascript无法正常工作

3 个答案: