Модальное окно (popup) практика HTML CSS JavaScript
В этом видео мы создадим модальное окно, используя HTML, CSS и JavaScript, без библиотек.
исходники:
готовый код:
Функционал:
— Модальное окно ровно по центру
— Закрытие окна при клике мимо окна
— Закрытие окна при нажатии на клавишу «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 Итог
Готовый код:
Автор — Максим Лескин
👀 Подписаться на канал:
🌍 Наш сайт:
😃 ВКонтакте:
#methed #javascript #frontend
1 view
146
43
4 weeks ago 00:28:57 1
Модальное окно (popup) практика HTML CSS JavaScript
4 weeks ago 03:01:08 1
React JS фундаментальный курс от А до Я
2 months ago 00:10:52 1
HTML & CSS практика | Модальное окно
2 months ago 00:07:00 1
Массовое редактирование полей в amoCRM
2 months ago 02:39:26 1
React & ИНТЕРНЕТ МАГАЗИН С НУЛЯ. PERN stack PostgreSQL + express + React js +
2 months ago 00:21:05 1
Модальное окно, таблица базы данных, обработка и вывод без перезагрузки страницы. Продолжение.
2 months ago 00:44:16 1
Модальное окно, таблица базы данных, обработка и вывод без перезагрузки страницы
2 months ago 02:01:08 1
Разработай 6 проектов на ReactJS (для начинающих)
3 months ago 03:01:26 1
Vue 3 фундаментальный курс от А до Я
3 months ago 02:30:12 1
Подробный видео курс по Bootstrap 5 на русском языке, Как создать сайт на Bootstrap 5
3 months ago 01:25:01 1
💎 Рисуем дизайн сайта для психолога “Отзывы часть 2“
4 months ago 00:03:27 1
Видеоурок по английскому языку: Модальный глагол MAY
4 months ago 00:24:47 1
Простое модальное окно (Popup окно)
4 months ago 00:41:24 1
Модальные окна (попапы) на HTML CSS JavaScript. Всплывающие окна. Как это сделать?
4 months ago 00:32:47 3
Модальное окно на html, css и немного js
4 months ago 00:03:33 1
Видеоурок по английскому языку: Модальный глагол Must
5 months ago 03:07:38 1
Практика, которая сделает тебя FRONTEND разработчиком | React Crypto App
5 months ago 00:30:18 1
Красивые модальные окна с библиотекой iziModal
5 months ago 00:16:22 1
КАК ПОПРОСИТЬ с CAN и MAY. МОДАЛЬНЫЕ ГЛАГОЛЫ в английском.