jQuery - lightbox stay and page scroll

Question

How can i create a lightbox that will always stay in const height and width of my document, and when i scroll the page behind, ligthbox don't move and page is scrolling? I had one css that shows me a lightbox when i click on link:

function resizeLightbox() {
    var overlay = createOverlay(),
        lightbox = createLightbox();

    overlay.css({
        "width": doc.width(),
        "height": doc.height()
    });

    var width = lightbox.outerWidth(),
        height = lightbox.outerHeight();

    lightbox.css({
        "position": "fixed",
        "width": width,
        "height": height,
        "top": ***, // i remove that
        "left": *** // and that
    });
}



.lightbox__lightbox {
    display: none;
    background: #fff url(../gallery/ring.gif) center center no-repeat;
    z-index: 10000;
    // added sth like this:
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto auto;

}

Yeah i found mistake, the problem is in top and left properties, how can i dynamic count a middle of my screen??

I need to write a function to count a middle of my screen " *** "

Answer 1

just add position: fixed; to the css of lightbox

lightbox.css({
            "position":'fixed',
            "width": width,
            "height": height,
            "top": (win.height() / 2) - (height / 2) + doc.scrollTop(),
            "left": (win.width() / 2) - (width / 2) + doc.scrollLeft()
        });