title: Changing the display from block to none, Problems in showing div
body: <p>This is my first question here and I've tried to search for quite some time now and I haven't found any question that is the same as mine or touches the same problem.</p>
  
  <p>I want to do a CSS popup that has a background-div covering the whole website and a centered div showing actual content.</p>
  
  <p>My problem is that only the centered div is showing up when I'm clicking the button that is supposed to show them both. Even when I comment out the <code>display:none</code> - attribute in my css-file, the background div simply doesn't have any color or style attached to it. If I fill it with text, the text shows up on the website where the div is "supposed" to be if there weren't any style sheet attached to it.</p>
  
  <p>I've gotten the code from <a href="https://stackoverflow.com/users/944919/coder">coder</a>s answer in <a href="https://stackoverflow.com/questions/19064987/html-css-popup-div-on-text-click">this question</a>.</p>
  
  <p>Here it is:</p>
  
  <p><strong>Script:</strong></p>
  
  <pre><code>$("#btn-update").click(function() {
          document.getElementById("light").style.display="block";
          document.getElementById("blackground").style.display="block";
  });
  </code></pre>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;button type="button" id="btn-update"&gt;Button!&lt;/button&gt;
  &lt;div id="light" class="white_content"&gt;This is the lightbox content. &lt;a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"&gt;Close&lt;/a&gt;&lt;/div&gt;
  &lt;div id="blackground" class="black_overlay"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.black_overlay{
      /*display: none;*/
      position: absolute;
      top: 10%;
      left: 10%;
      width: 100%;
      height: 100%;
      background-color: #000000;
      z-index:1001;
      /*-moz-opacity: 0.8;*/
      /*opacity:.80;*/
      /*filter: alpha(opacity=80);*/
  }
  .white_content {
      display: none;
      position: absolute;
      top: 25%;
      left: 25%;
      width: 15%;
      height: 15%;
      padding: 16px;
      border: 16px solid orange;
      background-color: white;
      z-index:1002;
      overflow: auto;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/K57DH/11/" rel="nofollow noreferrer">Here's the fiddle-demo so you can play around as well</a></p>
  
  <p>I've tried changing the attributes, commenting them out, making the div visible from the get go but it always seems to not show properly (while the white_content always do).</p>
  
  <p><strong>Also:</strong> the JS-fiddle is having problems showing the white content, but the black overlay is showing just fine when you remove the <code>display:none</code> attribute.</p>
  
  <p>Thank you so much in advance for any help. Been stuck for a while now</p>