title: Scroll Modal, Not Body
body: <p><strong><em>Before you direct me to a previously answered question:</strong> I am NOT using Bootstrap, and I'm not currently using jQuery for my modal windows.</em></p>
  
  <p>I'm using <a href="http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/" rel="nofollow">this pure HTML/CSS modal</a>. I want to be able to scroll through a vertically long modal (but not past it), ideally while preventing the rest of the page from scrolling along with it. Right now the parent class of the modal is set to "position: fixed"; I'm guessing the fix involves changing it to "absolute", but beyond that I'm pretty clueless.</p>
  
  <p>The only thing I can think of (jQuery-wise) is a condition based on modal opacity, so that when there's a visible modal, it's only possible to scroll down to the end of the modal div (based on its position from the top + height). It's not perfect, but it's only a minor setback since length-wise I know it'll still roughly coincide with the section the links are in (I won't reach the footer by scrolling down my modal, is what I mean). I'm sure there's a smarter way to do it, though. I'm not super familiar with jQuery syntax, so I'd really appreciate if suggestions came with bits of code. </p>
  
  <p>Alternately, feel free to point me to alternate options for modal windows. I'm not against jQuery-based ones if they're light and simple enough. I really want to avoid Bootstrap as much as possible, though.</p>
  
  <p><strong>EDIT:</strong> Sample code illustrating the problem.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  
  &lt;style&gt;
  body {
      height: 4000px;
  }
  
  .modalDialog {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0,0,0,0.8);
      z-index: 1040;
      opacity:0;
      transition:         opacity 0.3s ease-in;
      -webkit-transition: opacity 0.3s ease-in;
      -moz-transition:    opacity 0.3s ease-in;
      -o-transition:      opacity 0.3s ease-in; 
      pointer-events: none;
  }
  
  .modalDialog &gt; div {
      color: #ffffff;
      height: 2000px;
      position: relative;
      top: 0;
      margin: 2.5%;
      padding: 10px;
      background: #000000;
      z-index: 1050;
  }
  
  .modalDialog:target {
      opacity:1;
      pointer-events: auto;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;a href="#modal"&gt;Open the modal window&lt;/a&gt;
  
      &lt;div id="modal" class="modalDialog"&gt;
          &lt;div&gt;This is the modal window&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>