Javascript 用灯箱背景覆盖整个页面

我用这个例子来描述我的工作灯箱，我想确保有几件事情发生，但我似乎做得不对。当你点击到lightbox的链接时，它会像预期的那样工作，但是黑色覆盖层只覆盖100%的浏览器窗口，所以如果你从那里向下滚动，它就不会被覆盖。另外，lightbox出现在页面顶部，我想要的是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');
        });
    }

});

---

尝试应用

位置：固定背景类？修复！谢谢你为什么我没有尝试，我永远不会知道！没问题！很高兴我能帮忙！