Automatically Delay to open pop up

<style type="text/css">
.hide{
    display:none;
}
.clo {
   background:url(images/wrong_icon.png) no-repeat;
    display: block;
    height: 42px;
    position: absolute;
    right: -17px;
    top: 0;
    width: 42px;
    z-index: 2147483647;
}

.show {
    background-color: white;
    border: 5px solid orange;
    display: block;
    left: 37%;
    padding: 13px;
    position: absolute;
    top: 26%;
    width: 25%;
}


.image {
 display: inline;
    width: 35%;
}
form{
    clear: both;
    margin: 0 auto;
    padding: 10px 0;
    width: 70%;
   
}
</style>

<script type="text/javascript" language="javascript">

window.onload=function() 
{
setTimeout(func1, 2000);  //sets a timer which calls function func1 after 2,000 milliseconds = 2 secs.
   
};
function func1()
{
document.getElementById("my_div").className="show";
}
</script>


<div>main page</div>
<div id="my_div" class="hide">
<a href="#" class="clo" onclick="document.getElementById('my_div').style.display='none';"></a>
 <h3>Subscribe</h3>
     <div class="image" ><img src="images/email.png"></div>
      <div style="display: inline-block;width: 65%;">Subscribe to our newsletter to get the latest scoop right to your inbox.</div>
    <form action="#" method="post">
      <input type="email" name="email" class="subscribe-input" placeholder="Email address" autofocus>
      <button type="submit" class="subscribe-submit">Subscribe</button>
    </form>
 <p style="text-align:center;">
 &copy; 2014&ndash;2015 <a href="https://fawzulhameed.wordpress.com/" target="_blank">Fawzulhameed</a>
 </p>
</div>