<a href="#" class="button js-open-overlay">Open the overlay</a>

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccc;
}

.button {
  display: inline-block;
  background: #333;
  color: #fff;
  text-decoration: none;
  padding: 10px;
  border-radius: 3px;
  border-bottom: 3px solid #111;
  transform: all ease .3s;
  
  &:hover {
    background: lighten(#333, 10%);
  } 
  
  &:active {
    border-bottom: 0px;
    transform: translate3d(0, 3px, 0);
  }
}

.c-overlay {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

'use strict';

/**
 * Overlay
 *
 * Controls creating, showing, hiding and removing of overlays
 */
var Overlay = (function() {
  var $body = $('body');

  function Overlay() {
    this.assignClass = 'c-overlay';
    this.el = false;
    this.animate = {
      duration: 0.3,

      visible: {
        display: 'block',
        autoAlpha: 0.7,
        ease: Power3.easeInOut
      },

      hidden: {
        display: 'none',
        autoAlpha: 0,
        ease: Power3.easeInOut
      }
    };
  }

  /**
   * Check if the overlay has already been created
   */
  Overlay.prototype.isCreated = function() {
    return this.el === false || typeof this.el === 'undefined' ? false: true;
  };

  /**
   * Create the overlay
   */
  Overlay.prototype.create = function() {
    var self = this;

    this.el = $('<div/>', {
      'class': this.assignClass
    }).appendTo($body);

    $(this.el).on('click', function() {
        self.hide();
    });
  };

  /**
   * Show the overlay
   */
  Overlay.prototype.show = function() {
    $body.addClass('prevent-overflow');
    TweenLite.fromTo(this.el, this.animate.duration, this.animate.hidden, this.animate.visible);
  };

  /**
   * Hide the overlay
   */
  Overlay.prototype.hide = function() {
    $body.removeClass('prevent-overflow');
    TweenLite.fromTo(this.el, this.animate.duration, this.animate.visible, this.animate.hidden);
  };

  /**
   * Remove the overlay
   */
  Overlay.prototype.destroy = function() {
    $body.removeClass('prevent-overflow');
    $(this.el).remove();
    this.el = false;
  };

  return Overlay;
})();

var overlay = new Overlay(),
    $openOverlay = $('.js-open-overlay');

overlay.create();

$openOverlay.on('click', function() {
	overlay.show();
});