Модальное окно на ванильном JavaScript

Этот проект представляет собой реализацию модального окна на чистом JavaScript с использованием отдельных файлов для логики управления модальными окнами.

Структура проекта:

• index.html: Основной HTML-файл, в котором определены разметка модальных окон, ссылки на стили и скрипты.

• style.css: Файл стилей, определяющий внешний вид элементов страницы, включая модальные окна.

• modal.css: Дополнительный файл стилей для модальных окон, импортируемый в style.css.

• script.js: Файл JavaScript, содержащий логику открытия и закрытия модальных окон.

• modalController.js: Файл, содержащий функцию modalController, которая управляет открытием и закрытием модальных окон.

• scrollController.js: Файл, содержащий объект scrollController, который предоставляет функции для временного отключения и включения прокрутки страницы при открытии модального окна.

Описание работы:

Основная логика работы модальных окон заключается в следующем:

• modalController.js: Этот файл определяет функцию modalController, которая принимает объект с параметрами для управления модальным окном. Внутри функции происходит определение обработчиков событий для открытия и закрытия модального окна. При открытии модального окна вызывается функция scrollController.disabledScroll(), которая временно отключает прокрутку страницы, а при закрытии модального окна - функция scrollController.enabledScroll(), включает прокрутку обратно.

• scrollController.js: Этот файл содержит объект scrollController, который предоставляет два метода: disabledScroll() и enabledScroll(). Первый метод временно отключает прокрутку страницы и сохраняет текущую позицию прокрутки, а второй метод включает прокрутку обратно и восстанавливает сохраненную позицию прокрутки. setTimeout помогает обеспечить плавные переходы и управлять временными задержками в процессе работы с модальными окнами и прокруткой страницы.

Таким образом, при открытии модального окна прокрутка страницы временно отключается, чтобы пользователь не мог прокручивать контент за пределами модального окна, а при закрытии модального окна прокрутка восстанавливается. Это обеспечивает более удобный пользовательский опыт при взаимодействии с модальными окнами.