#12 - Модальные окна на jQuery. Верстка сайта портфолио

YOUTUBE · 28.11.2025 07:12

Ключевые темы и таймкоды

Создание модальных окон

0:00

Дмитрий Валок представляет видео о создании модальных окон в веб-разработке.
Он объясняет, что в проекте есть три модальных окна, которые вызываются по клику на определенные кнопки.
Он также упоминает, что в проекте уже есть атрибуты стиля для модальных окон, но они скрыты.

Идентификация модальных окон

1:00

Дмитрий объясняет, что для каждого модального окна нужно присвоить уникальный идентификатор, чтобы определить, какое окно нужно вызвать.
Он также показывает, как использовать атрибут data для вызова определенного модального окна при клике на кнопку.

Обработка кликов и вызов модальных окон

2:43

Дмитрий демонстрирует, как сохранить значение атрибута data в переменной, чтобы вызвать модальное окно при клике на кнопку.
Он также объясняет, как использовать селектор и класс для вызова модального окна.

Завершение работы

6:24

Дмитрий завершает видео, показывая, как вызвать и закрыть модальные окна, используя класс show и remove.
Он также подчеркивает, что анимация модальных окон не была реализована в этом видео.

Закрытие модального окна

7:00

В видео автор объясняет, как закрыть модальное окно, используя класс "modal-close" и атрибут "data-modal-close".
Он также показывает, как закрыть модальное окно, когда пользователь нажимает на кнопку с этим классом.

Работа с скролом

9:45

Автор объясняет, что при вызове модального окна нужно добавить класс "no-scroll" к элементу "body" и "body-class" к элементу "body".
Это предотвращает скрол страницы при открытии модального окна.

Работа с кнопками

10:57

Автор показывает, как добавить атрибут "data-modal-close" к кнопкам, вызывающим модальные окна.
Это позволяет закрыть модальное окно при нажатии на кнопку.

Отмена кликов по маске

12:56

Автор объясняет, как отменить клик по маске, чтобы не закрывать модальное окно при заполнении формы.
Это достигается с помощью функции "stopPropagation".

Анимация модального окна

15:20

Автор объясняет, как добавить анимацию в модальное окно, используя CSS и JavaScript.
Он показывает пример, как перевернуть модальное окно на 90 градусов при вызове и вернуть его обратно через 2 секунды.

Оптимизация кода

19:47

Автор предлагает оптимизировать код, чтобы избежать дублирования кода и сделать его более читаемым.
Он также предлагает использовать переменные для хранения элементов и классов, чтобы упростить код.

Различные варианты анимации

21:42

Автор показывает, как можно использовать различные трансформации, такие как масштабирование, для создания более интересных анимаций.
Он также объясняет, как можно использовать разные значения для анимации, чтобы создать более плавные переходы.