Модальное окно на весь экран CSS при клике

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/velocity.min.js'></script>

<section class="compute-science">
  <p>
Как владелец малого бизнеса, вы знаете, что вам нужно использовать социальные сети и другой цифровой маркетинг. Таким образом, вы, вероятно, выполнили свой долг и создали бизнес-страницу Facebook. Вы можете быть разочарованы вашими усилиями и отсутствием увеличения доходов.
  </p>

  <div class="consectetu-section-action">
  <a href="#" class="btn" data-type="modal-trigger">Вызвать окно</a>
  <span class="consectetu-section-bg"></span>
  </div>  
  <div class="consectetu-section">
  <div class="consectetu-section-content">
  <p>
  Если вы не видите ожидаемых результатов со своей страницы, это может быть связано с отсутствующими компонентами, которые необходимы для успешных бизнес-записей Facebook. К счастью, вы можете усилить свое присутствие в Facebook, не будучи экспертом в социальных сетях. Вам просто нужно выполнить несколько улучшений.
  </p>

  <p>
Ваша страница Facebook должна иметь визуальную привлекательность, а фотография на обложке имеет жизненно важное значение для привлечения внимания потенциальных клиентов. Он занимает почти четверть экрана компьютера, поэтому он должен быть эффективным.
  </p>

  <p>
Вы должны выбрать фотографию, которая работает с размерами Facebook 851 пикселей в ширину и 315 пикселей в высоту для компьютеров и 640 x 360 для мобильных устройств. Facebook возьмет вашу фотографию и растянет ее, чтобы соответствовать этим размерам, в некоторых случаях она выглядит странно.
  </p>
  </div>  
  </div>
<a href="#" class="consectetu-section-close">закрыть</a>
  </section>

.compute-science {
  padding: 2em 5%;
  text-align: center;
  background-color: #ff4747;
}
.compute-science p {
  margin: 2em 0;
  line-height: 1.6;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (min-width: 768px) {
  .compute-science {
  padding: 4em 10%;
  }
  .compute-science p {
  font-size: 1.8rem;
  line-height: 2;
  }
}
@media only screen and (min-width: 1170px) {
  .compute-science {
  padding: 4em 20%;
  }
}

.consectetu-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;
  -moz-transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;
  transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;
}
.consectetu-section::after {
  /* gradient overlay at bottom of modal window */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  background: transparent;
  background: -webkit-linear-gradient( bottom , #34383c, rgba(52, 56, 60, 0));
  background: linear-gradient(to top, #34383c, rgba(52, 56, 60, 0));
}
.consectetu-section .consectetu-section-content {
  height: 100%;
  width: 100%;
  padding: 3em 5%;
  text-align: left;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.consectetu-section p {
  color: #ffffff;
  line-height: 1.6;
  margin: 2em 0;
}
.modal-is-visible .consectetu-section {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  -webkit-transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;
  -moz-transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;
  transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;
}
.modal-is-visible .consectetu-section .consectetu-section-content {
  -webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 768px) {
  .consectetu-section .consectetu-section-content {
  padding: 4em 10%;
  }
}
@media only screen and (min-width: 1170px) {
  .consectetu-section .consectetu-section-content {
  padding: 6em 20%;
  }
  .consectetu-section p {
  font-size: 2rem;
  line-height: 2;
  }
}

.consectetu-section-action {
  position: relative;
}
.consectetu-section-action .btn, .consectetu-section-action .consectetu-section-bg {
  display: inline-block;
  height: 4em;
  background-color: #34383c;
}
.consectetu-section-action .btn {
  width: 12.5em;
  border-radius: 5em;
  color: #ffffff;
  line-height: 4em;
  white-space: nowrap;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: color 0.2s 0.3s, width 0.3s 0s;
  -moz-transition: color 0.2s 0.3s, width 0.3s 0s;
  transition: color 0.2s 0.3s, width 0.3s 0s;
}
.consectetu-section-action .btn.to-circle {
  width: 4em;
  color: transparent;
  -webkit-transition: color 0.2s 0s, width 0.3s 0.2s;
  -moz-transition: color 0.2s 0s, width 0.3s 0.2s;
  transition: color 0.2s 0s, width 0.3s 0.2s;
}
.consectetu-section-action .consectetu-section-bg {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: 4em;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translateX(-2em);
  -moz-transform: translateX(-2em);
  -ms-transform: translateX(-2em);
  -o-transform: translateX(-2em);
  transform: translateX(-2em);
  -webkit-transition: visibility 0s 0.5s;
  -moz-transition: visibility 0s 0.5s;
  transition: visibility 0s 0.5s;
}
.consectetu-section-action .consectetu-section-bg.is-visible {
  opacity: 1;
  visibility: visible;
}

.consectetu-section-close {
  position: fixed;
  z-index: 1;
  top: 20px;
  right: 5%;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3) url(https://webdevtrick.com/wp-content/uploads/close-icon.svg) no-repeat center center;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
  transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
}
.no-touch .consectetu-section-close:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-is-visible .consectetu-section-close {
  visibility: visible;
  opacity: 1;
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
@media only screen and (min-width: 768px) {
  .consectetu-section-close {
  top: 70px;
  }
}

jQuery(document).ready(function($){

  $('[data-type="modal-trigger"]').on('click', function(){
  var actionBtn = $(this),
  scaleValue = retrieveScale(actionBtn.next('.consectetu-section-bg'));
   
  actionBtn.addClass('to-circle');
  actionBtn.next('.consectetu-section-bg').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
  animateLayer(actionBtn.next('.consectetu-section-bg'), scaleValue, true);
  });

  if(actionBtn.parents('.no-csstransitions').length > 0 ) animateLayer(actionBtn.next('.consectetu-section-bg'), scaleValue, true);
  });

  $('.compute-science .consectetu-section-close').on('click', function(){
  closeModal();
  });
  $(document).keyup(function(event){
  if(event.which=='27') closeModal();
  });

  $(window).on('resize', function(){
  //on window resize - update cover layer dimention and position
  if($('.compute-science.modal-is-visible').length > 0) window.requestAnimationFrame(updateLayer);
  });

  function retrieveScale(btn) {
  var btnRadius = btn.width()/2,
  left = btn.offset().left + btnRadius,
  top = btn.offset().top + btnRadius - $(window).scrollTop(),
  scale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width());

  btn.css('position', 'fixed').velocity({
  top: top - btnRadius,
  left: left - btnRadius,
  translateX: 0,
  }, 0);

  return scale;
  }

  function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {
  var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue),
  maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue);
  return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue);
  }

  function animateLayer(layer, scaleVal, bool) {
  layer.velocity({ scale: scaleVal }, 400, function(){
  $('body').toggleClass('overflow-hidden', bool);
  (bool)  
  ? layer.parents('.compute-science').addClass('modal-is-visible').end().off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend')
  : layer.removeClass('is-visible').removeAttr( 'style' ).siblings('[data-type="modal-trigger"]').removeClass('to-circle');
  });
  }

  function updateLayer() {
  var layer = $('.compute-science.modal-is-visible').find('.consectetu-section-bg'),
  layerRadius = layer.width()/2,
  layerTop = layer.siblings('.btn').offset().top + layerRadius - $(window).scrollTop(),
  layerLeft = layer.siblings('.btn').offset().left + layerRadius,
  scale = scaleValue(layerTop, layerLeft, layerRadius, $(window).height(), $(window).width());
   
  layer.velocity({
  top: layerTop - layerRadius,
  left: layerLeft - layerRadius,
  scale: scale,
  }, 0);
  }

  function closeModal() {
  var section = $('.compute-science.modal-is-visible');
  section.removeClass('modal-is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
  animateLayer(section.find('.consectetu-section-bg'), 1, false);
  });

  if(section.parents('.no-csstransitions').length > 0 ) animateLayer(section.find('.consectetu-section-bg'), 1, false);
  }
});