JQuery всплывающее окно не работает - простое настраиваемое всплывающее окно

У меня есть простое всплывающее окно 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);