title: i want to make the div show after few seconds automatically
body: <p>I need to make a div with a message pop up after few seconds to load window, maybe about 5 seconds.</p>
  
  <p>I was looking for some sources through google, and found a great example in this <a href="http://www.queness.com/post/1696/create-a-beautiful-looking-custom-dialog-box-with-jquery-and-css3" rel="nofollow">site</a>
  but, in this source, one thing that it doesn't support is to be able to set time. 
  In the comments, one user questioned about setting time and the creator suggested something like this </p>
  
  <blockquote>
    <p>var show = setTimeout("popup()", 3000);</p>
  </blockquote>
  
  <p>but it doesn't work for me!</p>
  
  <p>Of course, I asked the same question, but didn't get answers for now.</p>
  
  <p>Here, I'll link to a <a href="http://xn--mkro5kr2lovb719a7espng.com/" rel="nofollow">page</a> that I'm working on. Sorry it's in Japanese!
  You can find a red popup box that I'm trying to show up after seconds.</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function () {
  
      // if user clicked on button, the overlay layer or the dialogbox, close the dialog  
      $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {     
          $('#dialog-overlay, #dialog-box').hide();       
          return false;
      });
  
      // if user resize the window, call the same function again
      // to make sure the overlay fills the screen and dialogbox aligned to center    
      $(window).resize(function () {
  
          //only do it if the dialog box is not hidden
          if (!$('#dialog-box').is(':hidden')) popup();       
      }); 
  
  
  });
  
  //Popup dialog
  function popup(message) {
  
      // get the screen height and width  
      var maskHeight = $(document).height();  
      var maskWidth = $(window).width();
  
      // calculate the values for center alignment
      var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());  
      var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 
  
      // assign values to the overlay and dialog box
      $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
      $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
  
      // display the message
      $('#dialog-message').html(message);
  }
  &lt;/script&gt;
  
  &lt;body&lt;?php if(is_home()): ?&gt; onload="popup('&lt;p&gt;「千葉県　行政書士」などの&lt;br /&gt;&amp;nbsp;Yahoo! 検索で上位表示している、このウェブサイトを、&lt;br /&gt;&amp;nbsp;あなたのものにしませんか?&lt;/p&gt;')"&lt;?php endif; ?&gt;&gt;
  &lt;div id="dialog-overlay"&gt;&lt;/div&gt;
      &lt;div id="dialog-box"&gt;
          &lt;div class="dialog-content"&gt;
              &lt;div id="arrows"&gt;&lt;img src="&lt;?php bloginfo('template_url'); ?&gt;/img/dilog-box_arrow.png" alt="" &gt;&lt;/div&gt;
              &lt;div id="dialog-message"&gt;&lt;/div&gt;
              &lt;div class="al_c"&gt;&lt;a href="&lt;?php echo home_url(); ?&gt;/sales/" target="_self"&gt;&lt;img src="&lt;?php bloginfo('template_url'); ?&gt;/img/dialog-box_btn_off.png" class="btn" alt="HPレンタルの詳細ページへ" /&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;a href="#" class="button"&gt;閉じる&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>