title: make background blurry and disable background
body: <p>I'm trying to implement Ajax Loader. When it loads, it makes background blurred which is fine but background contents are still active. I want background to be disabled when loader appears.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container{
          /* overflow: hidden; */
      -webkit-filter: blur(13px);
      -moz-filter: blur(13px);
      -o-filter: blur(13px);
      -ms-filter: blur(13px);
      filter: blur(13px);
  }
  #spinner
  {
      /* display: none; */
      width:100px;
      height: 100px;
      position: fixed;
      top: 50%;
      left: 50%;
      background:url(../loading.gif) no-repeat center transparent;
      text-align:center;
      padding:10px;
      margin-left: -50px;
      margin-top: -50px;
      z-index:2;
      overflow: auto;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="spinner"&gt;&lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;!-- Some buttons and links are here, I want these disabled(container gone blurred but links and buttons are still active)--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>any luck?</p>