JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ac-wrapper" style='display:none'>
        <div id="popup">
            <center>
                 <h2>Popup Content Here</h2>    
                <input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
            </center>
        </div>
    </div>

CSS

#ac-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("images/pop-bg.png") repeat top left transparent;
        z-index: 1001;
    }
#popup {
        background: none repeat scroll 0 0 #FFFFFF;
        border-radius: 18px;
    	-moz-border-radius: 18px;
    	-webkit-border-radius: 18px;
        height: 361px;
        margin: 5% auto;
        position: relative;
        width: 597px;
    }

JavaScript

function PopUp(hideOrshow) {
        if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
        else document.getElementById('ac-wrapper').removeAttribute('style');
    }
    window.onload = function () {
        setTimeout(function () {
            PopUp('show');
        }, 0);
    }