Modality

modality.css

body.modality-on {
  overflow: hidden;
}
body.modality-on .modality--open {
  overflow-y: auto;
}

.modality {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
  opacity: 0;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.modality--open {
  z-index: 50;
  opacity: 1;
}
.modality--open .modality__dialog {
  top: 0;
  opacity: 1;
}
.modality__dialog {
  position: relative;
  top: -100%;
  width: 450px;
  padding: 25px 15px 20px;
  margin: 40px auto 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
  opacity: 0;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
.modality__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  font-size: 18px;
  line-height: 1;
  color: #000;
  background: transparent;
  border: none;
  outline: none;
  opacity: .7;
  transform: rotateZ(-45deg);
  transition: all .3s ease;
  cursor: pointer;
}
.modality__close:hover {
  opacity: 1;
  transform: rotateZ(45deg) scale(1.2);
}
.modality__content {
  // Styles for contents
}

modality.html

<div id="modalName" class="modality">
  <div class="modality__dialog">
    <button class="modality__close">+</button>
    <div class="modality__content">
      <h5>Title</h5>
      <p>Some text</p>
    </div>
  </div>
</div>

modality.js

$('.modality-btn').click(function() {
  var target = $(this).data('modality-target');
  $("body").addClass('modality-on');
  $('#' + target).addClass('modality--open');
});

$('.modality__close').click(function() {
  $('.modality').removeClass('modality--open');
  $('body').removeClass('modality-on');
});

modality.scss

body.modality-on {
  overflow: hidden;
  .modality--open {
    overflow-y: auto;
  }
}

.modality {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .6);
  z-index: -1;
  opacity: 0;
  transition: all .3s ease;
  &--open {
    z-index: 50;
    opacity: 1;
    .modality__dialog {
      top: 0;
      opacity: 1;
    }
  }
  &__dialog {
    position: relative;
    top: -100%;
    width: 450px;
    padding: 25px 15px 20px;
    margin: 40px auto 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .6);
    opacity: 0;
    transition: all .5s ease-in ;
  }
  &__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 25px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    background: transparent;
    border: none;
    outline: none;
    opacity: .7;
    transform: rotateZ(-45deg);
    transition: all .3s ease;
    cursor: pointer;
    &:hover {
      opacity: 1;
      transform: rotateZ(45deg) scale(1.2);
    }
  }
  &__content {
    // Styles for contents 
  }
}