Pop up box by css

<script type="text/javascript">
function apply()
{
    if(document.getElementById("apply"))
    {
     document.getElementById("popupform").style.display="block";
    }
    else
    {
    document.getElementById("popupform").style.display="none";
    }
}
 </script>


<style type="text/css">

.blankdiv{background-color:#000;
position:fixed;
z-index: 9001;
top:0px; height:100%;
left:0px;
width:100%; opacity: 0.65;
filter:alpha(opacity=65);}

 <style type="text/css">
#popupform{
height: 100%;
left: 0;
padding: 15px;
position: fixed;
top: 0;
width:97%;
z-index: 10001;
}
  
#popupform .applyform{position:relative; overflow:auto;
background-color:#fff;
width:670px;
height:500px;  margin:5% auto auto auto;
z-index: 9002; padding:10px; border:10px solid #7F3814; }


#pclose{background-image: url("images/close.png");
    background-position: left top;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 25px;
    margin: 5% auto -6%;
    position: relative;
    right: -348px;
    text-indent: -9999px;
    top: 0;
    width: 25px;
    z-index: 9999;}

  

</style>


<p>&nbsp;</p>
<div id="popupform" style="display: none;">
<div class="blankdiv">&nbsp;</div>
<div class="applyform">
<div class="pop-title">
<h3>Shipping Details</h3>
<div id="pclose" onclick="javascript:document.getElementById('popupform').style.display='none';">close</div>
</div>
<div id="contactarea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec orci massa, elementum non euismod vitae, dictum eu augue. Suspendisse sodales, risus eu bibendum hendrerit, leo metus pharetra velit, eu pellentesque dui nunc at tortor. Integer id purus libero, nec pulvinar ipsum. Nam eu mattis neque. Morbi dignissim laoreet dui, id imperdiet dui fermentum sed. Vestibulum leo lacus, rhoncus sed faucibus quis, hendrerit vitae urna. Nulla id arcu eget elit laoreet euismod in at orci. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed vitae quam nisi. Integer placerat tincidunt imperdiet. Phasellus posuere ligula vel mauris commodo semper.<br/>

Quisque lacinia quam in diam molestie cursus. Quisque elit leo, mollis vitae rhoncus et, sagittis eget elit. Aenean et ipsum felis, vulputate elementum libero. Integer tellus est, viverra ac dignissim nec, gravida ut metus. In sit amet turpis sem. Nullam a orci nec sem ultricies varius. Phasellus feugiat aliquet dolor id viverra. Pellentesque id porta justo. Duis enim risus, sodales in congue quis, sollicitudin et mi.
</div>
</div>
</div>

<a href="#" onclick="javascript:document.getElementById('popupform').style.display='block';"> test</a>
<!--<img onclick="javascript:document.getElementById('popupform').style.display='block';" src="{{media url="free-fast-shipping.png"}}" alt="" />-->