Попап(модальное окно) JS

const modalLinks = document.querySelectorAll('.modal-link');
const body = document.querySelector('body');
const lockPadding = document.querySelectorAll('.lock-padding');

let unlock = true;

const timeout = 800;

if (modalLinks.length > 0) {
  for (let index = 0; index < modalLinks.length; index++) {
    const modalLink = modalLinks[index];
    modalLink.addEventListener('click', function (e) {
      const modalName = modalLink.getAttribute('href').replace('#', '');
      const curentModal = document.getElementById(modalName);
      modalOpen(curentModal);
      e.preventDefault();
    });
  }
}

const modalCloseIcon = document.querySelectorAll('.close-modal');
if (modalCloseIcon.length > 0) {
  for (let index = 0; index < modalCloseIcon.length; index++) {
    const el = modalCloseIcon[index];
    el.addEventListener('click', function (e) {
      modalClose(el.closest('.modal'));
      e.preventDefault();
    });
  }
}

function modalOpen(curentModal) {
  if (curentModal && unlock) {
    const modalActive = document.querySelector('.modal.open');
    if (modalActive) {
      modalClose(modalActive, false);
    } else {
      bodyLock();
    }
    curentModal.classList.add('open');
    curentModal.addEventListener('click', function (e) {
      if (!e.target.closest('.modal-content')) {
        modalClose(e.target.closest('.modal'));
      }
    });
  }
}

function modalClose(modalActive, doUnlock = true) {
  if (unlock) {
    modalActive.classList.remove('open');
    if (doUnlock) {
      bodyUnlock();
    }
  }
}

function bodyLock() {
  const lockPaddingValue = window.innerWidth - document.querySelector('.wrapper-medium').offsetWidth + "px";

  if (lockPadding.length > 0) {
    for (let index = 0; index < lockPadding.length; index++) {
      const el = lockPadding[index];
      el.style.paddingRight = lockPaddingValue;
    }
  }
  body.style.paddingRight = lockPaddingValue;
  body.classList.add('lock');

  unlock = false;
  setTimeout(function () {
    unlock = true;
  }, timeout);
}

function bodyUnlock() {
  setTimeout(function () {
    if (lockPadding.length > 0) {
      for (let index = 0; index < lockPadding.length; index++) {
        const el = lockPadding[index];
        el.style.paddingRight = "0px";
      }
    }
    body.style.paddingRight = "0px";
    body.classList.remove('lock');
  }, timeout);

  unlock = false;
  setTimeout(function () {
    unlock = true;
  }, timeout);
}

document.addEventListener('keydown', function (e) {
    if (e.which === 27) {
        const modalActive = document.querySelector('.modal.open');
    modalClose(modalActive);   
 }
});

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #13171d;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.8s ease 0s;
  z-index: 101;
}

.modal.open {
  opacity: 0.9;
  visibility: visible;
}

.modal.open .modal-content {
  transform: perspective(500px) translate(0px, 0%) rotateX(0deg);
  opacity: 0.9;
}

.modal-body {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
  transition: all 0.8s ease 0s;
}

.modal-content {
  position: relative;
  background-color: #ffffff;
  border-radius: 20px;
  max-width: 500px;
  padding: 30px;
  transition: all 0.8s ease 0s;
  opacity: 0;
  transform: perspective(500px) translate(0px, -100%) rotate(45deg);
}

.modal-title {
  margin: 50px 87px 40px 88px;
  max-width: 325px;
  max-height: 447px;
  font-family: "Bebas Neue";
  font-weight: 700;
  font-size: 32px;
  line-height: 32px;
  text-align: center;
  color: #13171d;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.modal-close {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #13171d;
  opacity: 0.5;
  text-decoration: none;
}

<button class="button btn-main-action modal-link">Бесплатная консультация</button> 

<div id="modal" class="modal">
    <div class="modal-body">
        <div class="modal-content">
            <a href="#" class="modal-close close-modal">X</a>
            <h3 class="modal-title">
                Оставьте заявку на <span>бесплатную</span> консультацию
            </h3>
            <form class="form modal-form">
                <input type="text" name="name" class="input modal-input" placeholder="Имя">
                <input type="tel" name="mail" class="input modal-input" placeholder="Телефон">
                <div class="modal-buttons">
                    <button type="submit" class="button modal-button">
                        Получить консультацию
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>