title: How i set body overflow hidden when some class called
body: <p>I want to set body overflow to hidden when "popup" class was used. And called this class by JavaScript. As my CSS it don't work.<br />
  Can i have "body" tag nested in my class like this?</p>
  
  <pre><code>#CSS
  .popup {
      display: table;
      height: 100% !important;
      table-layout: fixed;
      width: 100%;
      position: fixed;
      top: 0px;
      bottom: 0px;
      z-index: 400;
      body {
          overflow: hidden!important;
      }
  }
  </code></pre>
  
  <p>My example is when you click on Facebook photos, it will appear to full screen and locked scrolling. Thanks all helps</p>
  
  <p>I call it like this.</p>
  
  <pre><code>&lt;a href="#" onclick="getphoto(int)"&gt;Click to view larger&lt;/a&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>function getphoto(inputString) {
          $('body').css('overflow', 'hidden');
          if(inputString.length == 0||false) {
               $('#suggestions3').fadeOut(); // Hide the suggestions box
          }else{
       //alert(inputString);
          $.post("p/photo.php", {queryString: ""+inputString+""}, function(data) { // Do an AJAX call
          $('#suggestions3').fadeIn(); // Show the suggestions box
          $('#suggestions3').html(data); // Fill the suggestions box
      });
  }
  }
  </code></pre>
  
  <p>inputString is photo id. 
  In photo.php it return html content <code>&lt;div class="popup"&gt;...my content...&lt;/div&gt;</code></p>