title: Disable scrolling while popup active
body: <p>I created a jQuery popup by following an online tutorial (<a href="http://uposonghar.com/popup.html">http://uposonghar.com/popup.html</a>).</p>
  
  <p>Due to my low knowledge on jQuery I am not able to make it work as of my requirements.</p>
  
  <p>My problem:</p>
  
  <ol>
  <li>I want to disable scroll of webpage while popup is active. </li>
  <li>Background fade color of popup while active is not working on full webpage.</li>
  </ol>
  
  <p>CSS:</p>
  
  <pre><code>body {
      background: #999;
  }
  #ac-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,.6);
      z-index: 1001;
  }
  #popup{
      width: 555px;
      height: 375px;
      background: #FFFFFF;
      border: 5px solid #000;
      border-radius: 25px;
      -moz-border-radius: 25px;
      -webkit-border-radius: 25px;
      box-shadow: #64686e 0px 0px 3px 3px;
      -moz-box-shadow: #64686e 0px 0px 3px 3px;
      -webkit-box-shadow: #64686e 0px 0px 3px 3px;
      position: relative;
      top: 150px; left: 375px;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function PopUp(){
      document.getElementById('ac-wrapper').style.display="none";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="ac-wrapper"&gt;
    &lt;div id="popup"&gt;
    &lt;center&gt;
      &lt;p&gt;Popup Content Here&lt;/p&gt;
      &lt;input type="submit" name="submit" value="Submit" onClick="PopUp()" /&gt;
    &lt;/center&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Page Content Here&lt;/p&gt;
  </code></pre>