JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="dialog">Content</div>
<button>Drop it</button>

CSS

#dialog { width: 300px; height: 100px; border: solid 1px #ddd; position: absolute; display: none; }

JavaScript

$("button").click(function() {
    var dlg = $("#dialog");
    dlg.show()
        .css({ left: ($(document).width() - dlg.width()) / 2, top: -102 })
       .animate({
          left  : ( ($(document).width() - dlg.width()) / 2),
          top   : ( $(document).scrollTop() + ($(window).height() - dlg.outerHeight()) / 2 )
        }, {
          duration  : 1000,
          easing    : 'easeOutBack'
        });
});