Right implementation of modal window

modal.css

.html-modal-opened {
  padding-right: calc(100vw - 100%);
}

.body-modal-opened {
  overflow-y: hidden;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
  overflow-y: auto;
}

.modal-window {
  position: relative;
  width: 67.5rem;
  background-color: #fff;
  padding: 2.5rem 8.125rem;
  font-size: 1.5rem;
  margin: 2.5rem auto;
}
.modal-window--center {
  margin: 0;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%)
}
.close {
  border: none;
  background: none;
  padding: 0;
  width: 2.0625rem;
  height: 2.0625rem;
  position: absolute;
  top: 1.3125rem;
  right: 1.3125rem;
}
.close svg {
  width: 100%;
  height: 100%;
}

modal.html

<div class="modal" id="modal-id">
  <div class="modal-window">
    <button class="close"></button>
  </div>
</div>

modal.js

initModals();
$(button).on('click', function(e) {
    e.preventDefault();
    showModal(modalId);
});
function showModal(modalSel) {
    $('html').addClass('html-modal-opened');
    $('body').addClass('body-modal-opened');
    $(modalSel).fadeIn('fast');
    return false;
}
function closeModal(modalSel) {
    $(modalSel).fadeOut('fast');
    $('html').removeClass('html-modal-opened');
    $('body').removeClass('body-modal-opened');
}
function initModals() {
    $('.modal, .close').on('click', function() {
        closeModal('.modal');
        return false;
    });
    $('.modal-window').on('click', function(e) {
        e.stopPropagation();
    });
}

modal.pug

.modal#modal-id
    .modal-window
        button.close

modal.scss

.html-modal-opened {
  padding-right: calc(100vw - 100%);
}
.body-modal-opened {
  overflow-y: hidden;
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  left:0;
  bottom: 0;
  right: 0;
  background-color: rgba(#000,.3); //backdrop color
  z-index:10;
  overflow-y: auto;
}
.modal-window {
  position: relative;
  width:rem(1080); //window width
  background-color: #fff;
  padding: rem(40) rem(130);
  font-size: rem(24);
  margin: rem(40) auto;
}
.modal-window--center {
  margin: 0;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%)
}
.close { //close modal window button
  @include resetBtn();
  @include size(rem(33));
  position: absolute;
  top: rem(21);
  right: rem(21);
  svg {
    @include size(100%);
  }
}