Сделал Модальное окно. Но оно не открывается на сайте при нажатии. Никаких ошибок в консоли нет. В чем может быть причина?

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

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

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

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

modalCloseBtn.addEventListener("click", closeModal);

modal.addEventListener("click", (e) => {
  if (e.target === modal) {
    closeModal();
  }
});

document.addEventListener("keydown", (e) => {
  if (e.code === "Escape" && modal.classList.contains("show")) {
    closeModal();
  }
});

const modalTimerId = setTimeout(openModal, 3000);

function showModalByScroll() {
  if (
    window.pageYOffset + document.documentElement.clientHeight >=
    document.documentElement.scrollHeight
  ) {
    openModal();
    window.removeEventListener("scroll", showModalByScroll);
  }
}

window.addEventListener("scroll", showModalByScroll);

.modal {
  display: none;
}

.show {
  display: block;
}

<header class="header">
  <div class="header__left-block">
    <div class="header__logo">
      <img src="icons/logo.svg" alt="Логотип">
    </div>
    <nav class="header__links">
      <a href="#" class="header__link">Доставка питания</a>
      <a href="#" class="header__link">Второй пункт</a>
    </nav>
  </div>
  <div class="header__right-block">
    <button data-modal class="btn btn_white">Связаться с нами</button>
  </div>
</header>[![введите сюда описание изображения][1]][1]
<div class="offer">
  <div class="bgc_y"></div>
  <div class="container">
    <div class="offer__text">
      <h2 class="title">Что мы можем вам предложить?</h2>
      <div class="offer__descr">
        Наша основная идея - это правильное питание. Оно может быть простым и вкусным. Мы не просто доставка, мы сервис! Мы взяли на себя все расчеты БЖУ, калорийности, объемов порций и прочие важные, но скучные аспекты. Вам остается только полезная, сытная и правильная еда, которую мы привозим прямо под дверь.
      </div>
    </div>
    <div class="offer__action">
      <button data-modal class="btn btn_dark">Связаться с нами</button>
    </div>
  </div>
  <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>
  </body>

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

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

modalTrigger.forEach(btn => {
  btn.addEventListener('click', openModal);
});

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

modalCloseBtn.addEventListener('click', closeModal);

modal.addEventListener('click', (e) => {
  if (e.target === modal) {
    closeModal();
  }
});

document.addEventListener('keydown', (e) => {
  if (e.code === "Escape" && modal.classList.contains('show')) {
    closeModal();
  }
});

const modalTimerId = setTimeout(openModal, 3000);

function showModalByScroll() {
  if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
    openModal();
    window.removeEventListener('scroll', showModalByScroll);
  }
}

window.addEventListener('scroll', showModalByScroll);

.modal {
  display: none;
}
.modal.show {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Food</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header class="header">
    <div class="header__left-block">
      <div class="header__logo">
        <img src="icons/logo.svg" alt="Логотип">
      </div>
      <nav class="header__links">
        <a href="#" class="header__link">Доставка питания</a>
        <a href="#" class="header__link">Второй пункт</a>
      </nav>
    </div>
    <div class="header__right-block">
      <button data-modal class="btn btn_white">Связаться с нами</button>
    </div>
  </header>
  <div class="offer">
    <div class="bgc_y"></div>
    <div class="container">
      <div class="offer__text">
        <h2 class="title">Что мы можем вам предложить?</h2>
        <div class="offer__descr">
          Наша основная идея - это правильное питание. Оно может быть простым и вкусным. Мы не просто доставка, мы сервис! Мы взяли на себя все расчеты БЖУ, калорийности, объемов порций и прочие важные, но скучные аспекты. Вам остается только полезная, сытная и
          правильная еда, которую мы привозим прямо под дверь.
        </div>
      </div>
      <div class="offer__action">
        <button data-modal class="btn btn_dark">Связаться с нами</button>
      </div>
    </div>
    <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>
</body>
<script src="script.js"></script>

</html>