В этом видео мы создадим модальное окно, используя HTML, CSS и JavaScript, без библиотек.
исходники: github.com/maksim-leskin/proj...
готовый код: github.com/maksim-leskin/proj...
Функционал:
- Модальное окно ровно по центру
- Закрытие окна при клике мимо окна
- Закрытие окна при нажатии на клавишу «Escape»
- Скролл модального окна
Тайм-коды 🕒
00:00 Приветствие и обзор исходников
00:28 Пишем HTML-код модального окна
01:20 Пишем стили, располагаем окно по центру
04:34 Скролл модального окна и другие мелочи
10:56 Пишем скрипт для открытия модального окна
14:56 Закрытие модального окна по крестику и при клике мимо окна
10:56 Пишем скрипт для открытия модального окна
18:18 Открытие окна на несколько кнопок
19:40 Оформляем весь код в функцию
23:54 Закрываем окно по нажатию на клавишу «Escape»
26:06 Добавим параметр: скорость анимации
28:26 Итог
Готовый код:
github.com/maksim-leskin/proj...
Автор - Максим Лескин
👀 Подписаться на канал: bit.ly/3CoaLCL
🌍 Наш сайт: methed.ru/
😃 ВКонтакте: vk.me/methed
#methed #javascript #frontend
Негізгі бет Модальное окно (popup) практика HTML CSS JavaScript
Пікірлер: 32