javascript - jQuery 弹出窗口不起作用 - 简单的自定义弹出窗口

Question

我有一个简单的 jquery 弹出窗口。我在让它工作时遇到问题。现在弹出窗口不显示。可以在以下位置查看实时网页:http://www.domainandseo.com/fibro/index.html

如果向下滚动一点，会出现一个链接，上面写着“点击放大”，应该会显示弹出窗口。

我的 html 是:

<div id="lightbox">
            <a href="" class="cross close"><img src="img/cross.png" alt="X" /></a>
            <img src="img/lightbox-img.jpg" alt="Supplemental Facts" class="lightbox-img" />
        </div>

    <div class="overlay"></div>

CSS 是:

#lightbox {
    width: 722px;
    height: 732px;
    background: #FFF;
    z-index: 1000;
    position: absolute;
    left: 250px;
    top: 100px;
    display: none;
}
    .cross {
        float: right;
    }
    .lightbox-img {
        margin-left: 90px;
        margin-top: 45px;
    }

.overlay {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:130%;
    z-index:998;
    background: url(../img/gray.png) repeat;
    display: none;
}

弹出窗口的 jQuery:

$(document).ready(function(){
//open popup
$(".pop").click(function(){
  $("#lightbox").fadeIn(1000);
  $(".overlay").css ({display: 'block'});
  positionPopup();

});


//close popup
$(".close").click(function(){
    $("#lightbox").fadeOut(500);
    $(".overlay").css ({display: 'none'});
});
});

//position the popup at the center of the page
function positionPopup(){
  if(!$("#lightbox").is(':visible')){
    return;
  } 
  $("#lightbox").css({


  });
}


//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);

Answer 1

改变

$(".#lightbox")

到

$("#lightbox")