A Pen by Andrew DeBroux.

index.html

<div class="container">
  <p class="modal-link">Click to open a modal window and an overlay.</p>
</div>

<div class="modal-overlay">
  <div class="modal-window">
    <h1>Welcome to the modal window!</h1>
    <p onclick="openPopup()">This is a pop up that may contain a form or other info</p>
    <button class="close-button">Close popup</button>
</div>

</div>

Modal-and-overlay.markdown

Modal and overlay

Using jQuery to create a popup window with a content overlay. The modal window is centered on the page regardless of window resize or scroll (for long content). Responsive. Minimal design for easiest reuse purposes.

New and improved I've updated the code to use OO-JavaScript. I've also fixed the issue when the window is shorter than the modal window causing infinite scroll.

A Pen by Andrew DeBroux on CodePen.

License.

script.js

function Modal(modalEl, overlayEl) {
          this.modal = $(modalEl);
          this.overlay = $(overlayEl);
          this.wWidth = $(window).width();
          this.wHeight = $(window).height();
          this.dHeight = $(document).height();
        }

        Modal.prototype = {
          init: function(){
            this.bindHandlers();
          },

          bindHandlers: function(){
            var self = this;

            $('.modal-link').on('click', function(){
              self.showModal();
            });

            $(window)
              .resize(function() {
                self.setWinSize($(this));
                self.setModalPosition();
             })
               .scroll(function() {
                self.setWinSize($(this));
                self.setModalPosition();
             });

            $('.close-button').click(function(){
              self.hideModal();
            });
          },

          showModal: function(){
            this.overlay.fadeIn();
            this.modal.fadeIn();
            this.setModalPosition();
          },

          hideModal: function(){
            this.overlay.fadeOut();
            this.modal.fadeOut();
          },

          setModalPosition: function(){
            var modalHeight = this.modal.outerHeight(),
                modalWidth = this.modal.outerWidth(),
                scrollTop = $(window).scrollTop();

            if(this.wHeight < modalHeight){
              this.modal.css('top', scrollTop);
            } else {
              this.modal.css('top', this.centerVertically(this.wHeight,modalHeight,scrollTop));
            }

            if(this.wWidth < modalWidth){
              this.modal.css('left', 0);
            } else {
              this.modal.css('left', this.centerHorizontally(this.wWidth,modalWidth));
            }
          },

          centerVertically: function(w, m, scroll){
            return ((w - m)/2 + scroll);
          },

          centerHorizontally: function(w, m){
            return (w - m)/2;
          },

          setWinSize:function(win){
            this.wWidth = win.width();
            this.wHeight = win.height();
          }
        }


      $(document).ready(function(){
        var modal = new Modal($('.modal-window'), $('.modal-overlay'));
        modal.init();
      });

style.scss

@import "compass";
* {
  box-sizing: border-box;
}

.container {
  background: #bc4912;
  width: 100%;
  padding: 20px;
  text-align: center;
}

.modal-link {
  font-size: 2em;
  color: #FFFFEE;
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,.5);
  width: 100%;
  display: none;
  z-index: 1000;
  overflow: scroll;
}

.modal-window {
  position: absolute;
  max-width: 500px;
  width: 90%;
  padding: 20px;
  background: #FFF;
  top: 0;
  display: none;
  z-index: 2000;
}