Почему класс show добавляется, но не работает?

JS - >>>>>>

const modalTrigger = document.querySelectorAll("[data-modal]"),
    modal = document.querySelector(".modal");

  function closeModal() {
    modal.classList.remove("show");
    modal.classList.add("hide");
    document.body.style.overflow = "";
  }

  function openModal() {
    modal.classList.remove("hide");
    modal.classList.add("show");
    document.body.style.overflow = "hidden";
    clearInterval(modalTimerId);
  }

  modalTrigger.forEach(function (btn) {
    btn.addEventListener("click", function () {
      openModal();
    });
  });

HTML ->>>>>>>>>

<div class="modal">
  <div class="modal__dialog">
    <div class="modal__content">
      <form action="#">
        <div data-close class="modal__close">&times;</div>
        <div class="modal__title">
          Мы свяжемся с вами как можно быстрее!
        </div>
        <input
          required
          placeholder="Ваше имя"
          name="name"
          type="text"
          class="modal__input"
        />
        <input
          required
          placeholder="Ваш номер телефона"
          name="phone"
          type="phone"
          class="modal__input"
        />
        <button class="btn btn_dark btn_min">Перезвонить мне</button>
      </form>
    </div>
  </div>
</div>

У меня просто исчезает боковой скролл, так как оверфлоу применился при клике на кнопку, но сама панель не появляется. Я был вынуженден применить до этого просто style.display="block", но теперь это вылезло боком в коде