JSFiddle - React, Tailwind, and code Playground

JavaScript

var docHeight = $(document).height();

    $("body").append("<div id='overlay'></div>");

    $("#overlay")
        .height(docHeight)
        .css({
            'opacity': 0.4,
            'position': 'relative',
            'top': 0,
            'left': 0,
            'color': 'white',
            'background-color': 'black',
            'width': '100%',
            'z-index': 5000
        });

    $("#overlay").append("<div id='image-container'><img id='photo' src='http://ecn.channel9.msdn.com/o9/c4fcontent/migration/1815291/fingerprintreader18.jpg' alt='image' /></div>");

    $("#image-container").css("position", "absolute");
    $("#image-container").css("top", Math.max(0, (($(window).height() - $("#image-container").outerHeight()) / 2) +
        $(window).scrollTop()) + "px");
    $("#image-container").css("left", Math.max(0, (($(window).width() - $("#image-container").outerWidth()) / 2) +
        $(window).scrollLeft()) + "px");