JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script>
    function closeModal(id) {
    document.getElementById('popUpMask').style.display = 'none';
    document.getElementById(id).style.display = 'none';
}

function showModal(id) {
    var ht = getDocHeight();
    document.getElementById('popUpMask').style.height = ht + 'px';
    document.getElementById('popUpMask').style.display = 'block';
    document.getElementById(id).style.display = 'block';
}

function getDocHeight() {
    var b = document;
    return Math.max(Math.max(b.body.scrollHeight, b.documentElement.scrollHeight),            
                    Math.max(b.body.offsetHeight, b.documentElement.offsetHeight), 
                    Math.max(b.body.clientHeight, b.documentElement.clientHeight)); //+29
}
</script>


<div id="popUpMask" class="popUpMask"></div>
<div id="popUpID" class="modalPopupClass">
    <div class="section">
        <div class="sectionHeader">	<a class="modalClose" href="javascript:closeModal('popUpID');"><i class="fa fa-times"></i></a>
 <span class="sectionTitle">Section Title</span>

        </div>
        <div style="height: auto; width: 100%; float: left; background-color: #fff;">
            <br />
            <br />
            <br />
            <br />
        </div>
    </div>
</div>
<a href="javascript:showModal('popUpID');" class="tryitbtn">Preview >></a>

CSS

HTML {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    PADDING-TOP: 0px;
    BACKGROUND: #D6D8D9;
    MARGIN: 0px;
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    COLOR: #393d4b;
    overflow:auto;
    height:100%;
}
BODY {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    PADDING-TOP: 0px;
    BACKGROUND: #D6D8D9;
    MARGIN: 0px;
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    COLOR: #393d4b;
    /*JULY14*/
    HEIGHT: 100%;
    [if IE 7] height: auto;
    <!--[if IE 7]> height:auto !important;
    <![endif]-->
    /*OVERFLOW: AUTO;*/
    /* *height: auto;
	_height: auto;
	*/
}
.popUpMask {
    display: none;
    left: 0;
    opacity: 0.45;
    filter:alpha(opacity=45);
    position: absolute;
    top: 0;
    width: 99.9%;
    background:#000000;
    z-index:4000;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    height: 100%;
}
.modalPopupClass {
    position:absolute;
    width:600px;
    height: auto;
    background: #D6D8D9;
    ;
    padding:0px;
    top:250px;
    left:35%;
    display:none;
    z-index:4020;
}
.modalClose {
    float:right;
    margin-right: 10px;
    margin-top: 5px;
    font-size: 16px;
    color: #0495c9;
}
.section {
    width: 100%;
    overflow: hidden;
}
.sectionHeader {
    background: none repeat scroll 0 0 #393D4B;
    clear: left;
    float: left;
    font-size: 14px;
    left: 0;
    margin: 0;
    padding: 0px 0px 0px 0px;
    top: 0;
    width: 100%;
    COLOR: #FFFFFF;
    height: 30px;
}
.sectionTitle {
    padding: 0px 0px 0px 10px;
    font-size: 14px;
    line-height: 30px;
}