JSFiddle - React, Tailwind, and code Playground

HTML

<!-- let's call the following div as the POPUP FRAME -->
    <div id="popup" class="popup panel panel-primary">
        
        <!-- and here comes the image -->
        <img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup">
            
            <!-- Now this is the button which closes the popup-->
        <div class="panel-footer">
            <button id="close" class="btn btn-lg btn-primary">Close button</button>
        </div>
            
            <!-- and finally we close the POPUP FRAME-->
            <!-- everything on it will show up within the popup so you can add more things not just an image -->
    </div>

CSS

/*we need to style the popup with CSS so it is placed as a popup does*/
#popup {
    display:none;
    position:absolute;
    margin:0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 50px 2px #000;
}













body {
    background:url('http://i.imgur.com/kO2Ffje.png?1') center top;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

JavaScript

//with this first line we're saying: "when the page loads (document is ready) run the following script"
$(document).ready(function () {
    //select the POPUP FRAME and show it
    $("#popup").hide().fadeIn(1000);

    //close the POPUP if the button with id="close" is clicked
    $("#close").on("click", function (e) {
        e.preventDefault();
        $("#popup").fadeOut(1000);
    });
});