/Organick-hw-05

Primary LanguageHTML

Organick-hw-05

Домашнее задание

  • Создай репозиторий Organick-hw-05.
  • Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы.
  • Добавь анимацию декоративных эффектов для страниц макета домашнего задания.
  • Настрой GitHub Pages и добавь ссылку на живую страницу в шапку GitHub-репозитория.

Критерии приёма работы наставником

Модальное окно

«D1» Выполнена разметка и оформление «бекдропа» (тёмного полупрозрачного фона) модального окна.

«D2» «Бекдроп» заполняет 100% высоты и ширины вьюпорта браузера и фиксирован в нём.

«D3» Выполнена разметка и оформление модального окна.

«D4» Модальное окно вертикально и горизонтально спозиционировано посередине бекдропа.

«D5» Выполнена разметка и оформление кнопки закрытия модального окна в верхнем правом углу.

«D6» Изначально модальное окно и бекдроп скрыты при помощи класса is-hidden на бекдропе, в селекторе которого используются свойства visibility, opacity и pointer-events.

«D7» Если убрать с бекдропа класс is-hidden - появляется бекдроп и модальное окно.

«D8» Появление и скрытие модального окна анимировано при помощи перехода с произвольным эффектом, например scale или translate, и opacity.

Открытие/закрытие модального окна

Модальное окно с формой заявки открывается по клику на кнопку "Заказать услугу". Для того чтобы скрипт сработал необходимо добавить в разметку специальные атрибуты, по которым скрипт ищет элементы:

  • data-modal-open - на кнопку открытия модального окна.
  • data-modal-close - на кнопку закрытия модального окна.
  • data-modal - на бекдроп модального окна.

После чего, перед закрывающим тегом body добавить тег script со ссылкой на файл скрипта для модально окна. Можно посмотреть видео-инструкцию.

<body>
  <!-- Вся твоя разметка, включая разметку модалки -->

  <!-- Ставим перед закрывающим тегом body -->
  <script src="./js/modal.js"></script>
</body>

Скрипт который необходимо скопировать и вставить в файл modal.js.

(() => {
  const refs = {
    openModalBtn: document.querySelector('[data-modal-open]'),
    closeModalBtn: document.querySelector('[data-modal-close]'),
    modal: document.querySelector('[data-modal]'),
  };

  refs.openModalBtn.addEventListener('click', toggleModal);
  refs.closeModalBtn.addEventListener('click', toggleModal);

  function toggleModal() {
    refs.modal.classList.toggle('is-hidden');
  }
})();