JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropElem">
    <div id="dropContent">
        <div id="dropClose">X</div>
        <img src="http://beautiful-island.50webs.com/beautiful-island/beautiful-island.jpg" alt="briai" />
    </div>
</div>

<h1>Hello</h1>

CSS

#dropElem {
    display: none;
    position: absolute;
    top: 0;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 25px 5px #999;
    padding: 20px;
    background: #fff;
}
#shadowElem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.3;
}
#dropContent {
    position: relative;
}
#dropClose {
    position: absolute;
    z-index: 99999;
    cursor: pointer;
    top: -32px;
    right: -30px;
    padding: 5px;
    background-color: black;
    border-radius: 6px 6px 6px 6px;
    color: #fff;
}

JavaScript

var shadow = $('<div id="shadowElem"></div>');
var speed = 1000;
$(document).ready(function () {
    $('body').prepend(shadow);
});
$(window).load(function () {
    screenHeight = $(window).height();
    screenWidth = $(window).width();
    elemWidth = $('#dropElem').outerWidth(true);
    elemHeight = $('#dropElem').outerHeight(true);

    leftPosition = (screenWidth / 2) - (elemWidth / 2);
    topPosition = (screenHeight / 2) - (elemHeight / 2);
    //console.log(screenHeight);

    $('#dropElem').css({
        'left': leftPosition + 'px',
            'top': -elemHeight + 'px'
    });
    $('#dropElem').show().animate({
        'top': topPosition
    }, speed);

    shadow.animate({
        'opacity': 0.7
    }, speed);

    $('#dropClose').click(function () {
        shadow.animate({
            'opacity': 0
        }, speed);
        $('#dropElem').animate({
            'top': -elemHeight + 'px'
        }, speed, function () {
            shadow.remove();
            $(this).remove();
        });
        //shadow.remove();
    });
});