JSFiddle - React, Tailwind, and code Playground

HTML

<button>show</button>
<div class="modal"><div><div><img src="http://placehold.it/350x50"></div></div></div>

CSS

.modal{
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 display:table;
 -webkit-transition:top 0 linear 600ms;
 top:-100%;
 overflow:hidden;
}
.modal>div{
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 -webkit-transition:opacity 300ms ease 300ms;
 opacity:0;
 background-color:rgba(0,0,0,0.7);
 line-height:0;
}
.modal>div>div{
 display:inline-block;
 text-align:left;
 -webkit-transition:opacity 300ms ease;
 opacity:0;
 background-color:red;

}
.modal.active{
 -webkit-transition:top 0 linear 0;
 top:0%;
}
.modal.active>div{
 -webkit-transition:opacity 300ms ease;
 opacity:1;
}
.modal.active>div>div{
 -webkit-transition:opacity 300ms ease 300ms;
 opacity:1;
}

JavaScript

function show(){
 //box.style.lineHeight=window.innerHeight+'px';
 box.classList.add('active');
}
function hide(){
 box.classList.remove('active');
}
var box=document.getElementsByClassName('modal')[0],
button=document.getElementsByTagName('button')[0];
button.addEventListener('click',show,false);
box.addEventListener('click',hide,false);
box.firstChild.firstChild.addEventListener('click',function(e){e.stopPropagation();},false);

/* type

imageSet

imgSingle
video
login
form
map
code

alert
prompt
confirm*/