用灯箱背景覆盖整个页面

Question

我正在将这个例子用于我的工作灯箱，我想确保发生一些事情，但我似乎无法做对。当您点击指向灯箱的链接时，它按预期工作，但黑色覆盖仅覆盖100％的浏览器窗口，因此如果向下滚动它不会被覆盖。此外，灯箱出现在页面顶部，我想要的是div显示在用户点击的点上方？

.backdrop
{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:#000;
    opacity: .0;
    filter:alpha(opacity=0);
    z-index:50;
    display:none;
}

.box
{
    position:absolute;
    top:20%;
    left:30%;
        width:500px;
        height:300px;
        background:#ffffff;
        z-index:51;
        padding:10px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow:0px 0px 5px #444444;
        -webkit-box-shadow:0px 0px 5px #444444;
        box-shadow:0px 0px 5px #444444;
        display:none;
}

.close
{
        float:right;
        margin-right:6px;
}






$(document).ready(function() {

    $('.lightbox').click(function() {
        var thisBox = $(this).attr("name");
        console.log(thisBox);
        $('.backdrop,.' + thisBox).animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('.box').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop,.' + thisBox).css('display', 'block');
    });

    $('.close').click(function() {
        close_box();
    });

    $('.backdrop').click(function() {
        close_box();
    });

    function close_box() {
        $('.backdrop,.box').animate({
            'opacity': '0'
        }, 300, 'linear', function() {
            $('.backdrop,.box').css('display', 'none');
        });
    }

});