title: make page stop scrolling when lightbox is active
body: <p>I have the following lightbox which includes a form. Everything works fine. My only problem is how to make the html page stop scrolling when the lightbox is active.</p>
  
  <pre><code>&lt;a href = "javascript:void(0)" onclick="
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block'"&gt;
  &lt;img src="img/add.jpg"/&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;div id="light" class="white_content"&gt;
  
  &lt;input name="degree_1" type="text" size="73"
     value="&lt;?php echo $user_data_profile_education['degree_1'];?&gt;"/&gt;
  &lt;/br&gt;&lt;/br&gt;
  Grade&lt;/br&gt;
  &lt;input name="grade_1" type="text" size="73"
     value="&lt;?php echo $user_data_profile_education['grade_1'];?&gt;"/&gt;
  
  &lt;a href = "javascript:void(0)" onclick="
    document.getElementById('light').style.display='none';
    document.getElementById('fade').style.display='none'"&gt; 
  &lt;/br&gt;&lt;img src="img/done_editing.jpg"/&gt; &lt;/a&gt;&lt;/div&gt;
  &lt;div id="fade" class="black_overlay"&gt;&lt;/div&gt;    
  </code></pre>
  
  <p>and this is my <strong>css</strong>:</p>
  
  <pre><code>.black_overlay{
      display: none;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 220%;
      background-color: grey;
      z-index:1001;
      -moz-opacity: 0.8;
      opacity:.80;
      filter: alpha(opacity=80);
  }
  
  
  .white_content {
      display: none;
      position: absolute;
      top: 45%;
      left: 30%;
      width: 32%;
      height: 51%;
      padding: 30px;
      padding-left:50px;
      border: 5px solid green;
      background-color: white;
      z-index:1002;
      overflow: auto;
  }
  </code></pre>