title: How to add a 10 second countdown timer to a popup
body: <p>I just want to add a countdown timer of 10 seconds to a popup after which the popup closes. </p>
  
  <p>When the popup is loaded I need to display a 10 second countdown within the popup. Once the 10 second time elapses the popup should then close.</p>
  
  <p>This is the code I have tried so far:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Popup Box DIV&lt;/title&gt;
  &lt;style type="text/css"&gt;
  #popup_box {
      display: none; /* Hide the DIV */
      position: fixed;
      _position: absolute; /* hack for internet explorer 6 */
      height: 500px;
      width: 500px;
      background:;
      left: 400px;
      top: 50px;
      z-index: 100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
      margin-left: 25px;
      /* additional features, can be omitted */
      border: 2px;
      padding: 15px;
      font-size: 15px;
      -moz-box-shadow: 0 0 5px;
      -webkit-box-shadow: 0 0 5px;
      box-shadow: 0 0 5px;
  }
  #container {
      background:; /*Sample*/
      width: 100%;
      height: 100%;
  }
  a {
      cursor: pointer;
      text-decoration: none;
  }
  /* This is for the positioning of the Close Link */
  #popupBoxClose {
      font-size: 20px;
      line-height: 15px;
      right: 5px;
      top: 5px;
      position: absolute;
      color: #6fa5e2;
      font-weight: 500;
  }
  &lt;/style&gt;
  &lt;script src="jquery-1.2.6.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;        
  $(document).ready( function() {
  
      // When site loaded, load the Popupbox First
      loadPopupBox();
  
      $('#popupBoxClose').click( function() {            
          unloadPopupBox();
      });
  
      $('#container').click( function() {
          unloadPopupBox();
      });
  
      function unloadPopupBox() {    // TO Unload the Popupbox
          $('#popup_box').fadeOut("slow");
          $("#container").css({ // this is just for style        
              "opacity": "1"  
          }); 
      }    
  
      function loadPopupBox() {    // To Load the Popupbox
          $('#popup_box').fadeIn("slow");
          $("#container").css({ // this is just for style
              "opacity": "0.3"  
          });         
      }        
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="popup_box"&gt; &lt;!-- OUR PopupBox DIV--&gt;
      &lt;h1&gt;it closed  after 10 sec&lt;/h1&gt;
      &lt;a id="popupBoxClose"&gt;Close&lt;/a&gt; &lt;/div&gt;
  &lt;div id="container"&gt; &lt;!-- Main Page --&gt;
      &lt;h1&gt;&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>