JSFiddle - React, Tailwind, and code Playground

HTML

<div id='popupOut'>
<div id='popup'>
    <div id='image'>
    <i style='height:100%;display:inline-block;vertical-align: middle;'></i>
        <img src='http://i.imgur.com/hNqfyLL.jpg' id='contentImg'>
        </div>
    <div id='close'>關閉</div>
</div></div>
    <p>網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁網頁</p>

CSS

#popup {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    width:400px;
    max-width:90%;
    height:450px;
    max-height:90%;
    overflow:hidden;
    background:#eeeeee;
    border-radius:20px;
    border:solid 1px #777777;
    padding:0px;
}
#close{
    position:absolute;
    bottom:0px;
    left:0px;
    height:50px;
    width:100%;
    background:#333333;
    line-height:50px;
    text-align:center;
    color:#f7f7f7;
    cursor:pointer;
    font-size:30px;
    padding:0px;
}
#contentImg{
    max-width:100%;
    max-height:100%;
    vertical-align:middle;
}
#image{
    position:absolute;
    padding:0px;
    width:100%;
    left:0px;
    top:0px;
    bottom:50px;
    text-align:center;
    display:table-cell;
    font-size:0px;
    background:#666666;
}
#popupOut{
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    background:rgba(127,127,127,0.5);
}
body{
    background:#ffffff;
}

JavaScript

$('#close').click(function(){
    $('#popupOut').fadeOut();
});