Modal like bootstrap

Modal

<button class="open-modal-btn" data-target="modal">open modal</button>

<div class="modal" id="modal">
  <div class="modal-inner">
    <button type="button" class="close-modal-btn">&times;</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ducimus tempora deserunt repellat architecto adipisci. </p>
  </div>
</div>

modal.css

body.modal-open {
  overflow: hidden;
}

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 15px;
  transition: all 0.3s;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 999;
  &.active {
    opacity: 1;
    visibility: visible;
    overflow-x: hidden; 
    overflow-y: auto;
  }
}

.modal-inner {
  position: relative;
  max-width: 500px;
  /* min-height: 600px; */
  margin: 50px auto;
  padding: 40px 20px 20px;
  background-color: #fff;
  border-radius: 3px;
  transition: transform 0.3s;
  transform: translateY(20%);
  &.active {
    transform: translateY(0);
  }
}

.close-modal-btn {
  padding: 0;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  outline: none;
  border: none;
  width: 30px;
  height: 30px;
  line-height: 27px;
  text-align: center;
  font-size: 50px;
  font-weight: 300;
  color: #000;
  cursor: pointer;
}

modal.js

function openModal($modal) {
  // Note: fixed elements will also need the margin 
  // adjustment (like a fixed header, if you have one).
  $modal = '#' + $modal;
  var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
  //$('.page-header').css('right', scrollBarWidth);
  $('body').css('padding-right', scrollBarWidth).addClass('modal-open');
  $($modal).addClass('active').find('.modal-inner').addClass('active');
}

function closeModal($modal) {
  $modal = '#' + $modal;
  setTimeout(function(){
    //$('.page-header').css('right', '0');
    $('body').css('padding-right', '').removeClass('modal-open');
  }, 300);
  $($modal).scrollTop(0).removeClass('active').find('.modal-inner').removeClass('active');
}

//Clicking outside the inner modal content should close it.
$('.modal').on('click', function () {
  var $target = $(this).attr('id');
  closeModal($target);
}).find('.modal-inner').on('click', function (e) {
  e.stopPropagation();
});

$('.open-modal-btn').on('click', function (e) {
  e.preventDefault();
  var $target = $(this).attr('data-target');
  openModal($target);
});

$('.close-modal-btn').on('click', function(e){
  e.preventDefault();
  var $target = $(this).parents('.modal').attr('id');
  closeModal($target);
});