index.html

<style>
  #modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    text-align: center;
  }

  .noscroll {
    overflow: hidden;
  }

  .scroll {
    overflow-x: auto;
    overflow-y: scroll;
  }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('#openModal').click(function() {
    $('body').addClass('noscroll');
    $('#modal').addClass('scroll').show();
  })

  $('#modal').click(function() {
    $('body').removeClass('noscroll');
    $('#modal').removeClass('scroll').hide();
  })
});
</script>

<div id="background">
  <a href="#" id="openModal"><h1>Background</h1></a>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
  <h1>Background</h1>
</div>
<div id="modal">
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
  <h2>Modal</h2>
</div>