button.button Pop it up!

aside.modal
  div.modal__content
    button.button--close Go away!
  
  
View Compiled
$color-primary: #e74c3c;

body {
  background: $color-primary;
  padding: 8rem 0;
  text-align: center; // Ghetto centering
}

/*
  BUTTONS
*/

.button,
.button--close {
  background: #eee;
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.2);
  padding: 1rem 2rem;
  position: relative;
  
  transition:
    background .2s ease-in-out,
    box-shadow .1s ease-in-out;
  
  &:focus { outline: 0; }
  &:hover { background: #fff; }
  &:active {
    box-shadow: none;
    top: 1px;
  }    
}

.button--close {
  background: $color-primary;
  color: #fff;
  &:hover { background: lighten($color-primary, 15%); }
}

/*
  MODAL
*/

.modal {
  
  &.is-open {
    &:after {
      height: 100%;
      opacity: 1;
      width: 100%;
      
      transition:
        opacity 2s ease-in-out;
    }
    
    .modal__content {
      top: 4rem; 
    }
  }
  
  &:after {
    background: rgba(255,255,255,.8);
    content: '';
    display: block;
    height: 0;
    position: absolute;
      top: 0; left: 0; z-index: 0;
    width: 0;
    
    transition:
      opacity 2s ease-in-out;
  }

  &__content {
    background: #fff;
    border: dashed 2px lighten($color-primary, 30%);
    box-shadow: 0 0 0 3px #fff;
    box-sizing: border-box;
    //  display: none;
    display: inline-block;
    margin-left: -10rem;
    padding: 4rem;
    position: fixed;
    top: -100%;
    left: 50%;
    z-index: 2;
    width: 20rem;
    
    transition: top .4s ease-in-out;
  }
}

/*
  ANIMATION
*/
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
View Compiled
var $triggerOn = document.querySelector('.button');
var $triggerOff = document.querySelector('.button--close');
var $modal   = document.querySelector('aside');

function toggleModal(){
  $modal.classList.toggle('is-open');
}
$triggerOn.addEventListener('click', toggleModal );
$triggerOff.addEventListener('click', toggleModal );
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js