title: How do I get one individual modal pop-up to display at a time?
body: <p>I need a little jQuery help. I have a number of individual product divs (<strong>.productsWrap</strong>) displaying on a page all with a hidden infomation section. The idea is that when <strong>a.activator</strong> for a particular product is clicked a semi-opaque overlay (<strong>.productsOverlay</strong>) drops down and is followed by the info section for that particular product (<strong>.productsPopBox</strong>). There might be ten <strong>.productsWrap</strong>s on the page so I only want one of the pop-ups to display at a time.</p>
  
  <p>In short, if somebody clicks <strong>a.activator</strong> for a given product (.productsWrap) then <strong>.productsOverlay</strong> and <strong>.productsPopBox</strong> will appear for that product only.</p>
  
  <p>The HTML markup is:</p>
  
  <pre><code>&lt;section class="productsWrap"&gt;
     &lt;section class="blueHeader"&gt;&lt;h2&gt;&lt;/h2&gt;&lt;/section&gt;
     &lt;article&gt;
        &lt;div class="productsText"&gt;
            &lt;a class="activator"&gt;Full service details&lt;/a&gt;
        &lt;/div&gt;
     &lt;/article&gt;
  &lt;/section&gt;
  
  &lt;div class="productsOverlay overlay" style="display:none;"&gt;&lt;/div&gt;
  &lt;div class="productsPopBox popBox" &gt;
      &lt;h2&gt;&lt;/h2&gt;&lt;span class="close"&gt;x&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my bad attempt at the jQuery: <a href="http://jsfiddle.net/rXNKU/5/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>My first attempt sort of worked. It looked good insofar as the pop-up actually did something and the effects looked nice. However, it caused all of the <strong>.productsOverlay</strong> and <strong>.productsPopBox</strong> for all of the <strong>.productsWrap</strong> to drop down at the same time. </p>
  
  <pre><code>$('.activator').click(function(){
      $('.productsOverlay, .caseStudiesOverlay').fadeIn('fast',function(){
          $('.productsPopBox, .caseStudiesPopBox').animate({'top':'-150px'},500);
      });
  });
  $('.productsOverlay, .caseStudiesOverlay, span.close').click(function(){
      $('.productsPopBox, .caseStudiesPopBox').animate({'top':'-1000px'},500,function(){
         $('.productsOverlay, .caseStudiesOverlay').fadeOut('fast');
      });
  });
  </code></pre>