title: Javascript/HTML/CSS popup
body: <p>I'm working on a popup using a hidden DIV and loading it with <code>window.onload</code>. As well as this I'm also loading an empty DIV with a overlay CSS style (to fill the background behind the popup with a semi-transparent black). And finally to top it off there is a close button in the top right corner of the popup.</p>
  
  <p>I've scanned through SA and a couple of forums (as this is the first time I do something like this with JS) &amp; have got most of the code from there. Yet when adding it all together, something's stopping it from working, I've been staring at this for a day now and maybe I'm just missing something really obvious?</p>
  
  <p>The site is here: <a href="http://0034.eu/townapp/" rel="nofollow">http://0034.eu/townapp/</a></p>
  
  <p>And here's the code:</p>
  
  <p>The JS:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function show_popup()
  {
    document.getElementById('popup').style.display = 'block'; 
  }
  window.onload = show_popup;
  &lt;/script&gt;
  
  &lt;script language="text/javascript"&gt;
  window.onload = function() {
     $('#overlay-back').fadeIn(500);
  }
  &lt;/script&gt;
  
  &lt;script language="javascript"&gt;
  $(".close-image").click(function() {
  $(this).parent().hide();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="overlay-back"&gt;&lt;/div&gt;
  &lt;div id="popup"&gt;&lt;img class="close-image" src="images/closebtn.png" /&gt;&lt;span&gt;&lt;img src="images/load_sign.png" /&gt;&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>    #popup{
  position:absolute;
  display:hidden;
  top:200px;
  left:50%;
  width:400px;
  height:566;
  margin-left:-250px;
  background-color:white;
  }
      #overlay-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  filter: alpha(opacity=60);
  z-index: 5;
  display: none
  }
      .close-image{
  display: block;
  float:right;
  position:relative;
  top:-10px;
  right: -10px;
  height: 20px;
  }
  </code></pre>
  
  <p>Thanks a lot in advance!</p>