Facebook's theater view

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="jquery@1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="wrap">
      <div class="container">
        <h1>Facebook's <strong>theater</strong> view</h1>
        
        <div class="block">
          <div class="panel panel-info">
            <div class="panel-heading">
              <h2 class="panel-title">#1</h2>
            </div>
            <div class="panel-body">
              <button class="btn btn-default js-open-modal">Open modal</button>
            </div>
          </div>
        </div>
        
        <div class="block">
          <div class="panel panel-warning">
            <div class="panel-heading">
              <h2 class="panel-title">#2</h2>
            </div>
            <div class="panel-body">
              <button class="btn btn-default js-open-modal">Open modal</button>
            </div>
          </div>
        </div>
        
        <div class="block">
          <div class="panel panel-success">
            <div class="panel-heading">
              <h2 class="panel-title">#3</h2>
            </div>
            <div class="panel-body">
              <button class="btn btn-default js-open-modal">Open modal</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Bootstrap modal -->
    <div class="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close js-close-modal" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Scroll blocked</h4>
          </div>
          <div class="modal-body">
            <p>
              You'll find that you can't scroll the main page content. <br>
              Neither with scroll bar nor with mouse wheel.
            </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default js-close-modal" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary js-close-modal">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </body>

</html>

// Code goes here

$(function () {
  
  var closeModal = null;
  
  $('.js-open-modal').on('click', function () {
    closeModal = modal();
  });
  
  $('.js-close-modal').on('click', function () {
    if (closeModal) {
      closeModal();
      closeModal = null;
    }
  });
});

function modal (options) {
  var DEFAULT_OPTIONS = {
    page: '#wrap',
    modal: '.modal',
    backdrop: 100
  };
  
  var $backdrop, $modal, $page, $body, $win,
      close;

  options = $.extend({}, DEFAULT_OPTIONS, options || {});

  // shim layer with setTimeout fallback
  var reqAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
              window.setTimeout(callback, 1000 / 60);
            };
  })();

  (function open () {
    $win = $(window);
    $body = $('body');
    $modal = $(options.modal);
    $page = $(options.page);

    if (!!options.backdrop || options.backdrop == 0) {
      $backdrop = $('<div />', {'class': 'modal-backdrop'}).css({
        position: 'fixed',
        top: 0, left: 0,
        width: '100%', height: '100%',
        zIndex: options.backdrop,
        backgroundColor: 'rgba(0, 0, 0, 0.7)'
      }).appendTo($body);
    }

    var scrollTop = $win.scrollTop();

    $body.css({'overflow-y': 'scroll'});
    $page.css({
      position: 'fixed',
      top: -scrollTop,
      width: '100%'
    });
    $modal.addClass('theater');

    close = function () {
      if ($backdrop) {
          $backdrop.remove();
      }

      var data = $modal.data('modal');

      $page.css({
        position: '',
        top: '',
        width: ''
      });
      $modal.removeClass('theater');
      $modal.removeData('modal');
      
      $modal = null;
      $page = null;
      $backdrop = null;
      $body = null;

      $win.scrollTop(data.pageScrollTop);

      reqAnimFrame(function () {
        $win.scrollTop(data.pageScrollTop);
        $win = null;
      });
    };

    $modal.data('modal', {
      close: close,
      pageScrollTop: scrollTop
    });
  })();

  return close;
}

/* Styles go here */

.block .panel .panel-body {
  text-align: center;
  padding: 200px 0;
}


.theater {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
.theater .modal-dialog {
  display: table-cell;
  vertical-align: middle;
}
.theater .modal-content {
  max-width: 600px;
  margin: 0 auto;
}