title: How to make lightbox scroll the lightbox and not the page
body: <p>I am using the lightbox_me jquery plugin to open a lightbox when a user clicks on a product. Often the lightbox content stretches below the fold, and at the moment the right scrollbar moves the entire page when you scroll down.</p>
  
  <p>I'd like it to work like the pinterest lightbox, whereby the right scrollbar only scrolls the lightbox, and the rest of the page stays fixed. I've seen a few posts on this, but nothing seems to work for me.</p>
  
  <pre><code>jQuery(function(){
  
  
  $('.productBoxLink').click(function(e) {
      var box = $(this).siblings(".productLightboxContent").html();
      $('.lightBox').lightbox_me({
          centered: false,
          modalCSS:  {top: '50px'},
          onLoad: function() { 
                $('.productLightbox').html(box);
                $('.productUpdateInner').show();
              },
          onClose: function() {
                $('.productUpdateInner').hide();
              }
          });
      return false;
    });
  });
  
  
  .lightBox {
  width: 450px;
  background-color: #fff;
  top: 400px;
  position: fixed;
  padding: 30px;
  text-align: center;
  display: none;
  clear: both;
  -moz-box-shadow: 0 0 5px #5C5C5C;
  -webkit-box-shadow: 0 0 5px #5C5C5C;
  box-shadow: 0 0 5px #5C5C5C;
  border-radius: 5px;
  }
  </code></pre>
  
  <p>I've read that this can be done with a few changes to my CSS. Does anyone know how I can achieve this with the code shown? Thanks!</p>