Модальное окно (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

[CENTER-INFINITY]

Спасибо. Всё написано прямыми руками, всё работает.

[Uncaught_in_promise]

Вау. Это супер. В ЮТ полно туториалов по модалкам но все негодные, примитивные. А это 100% качество, так как преподает Максим Лескин

[natalia_]

Спасибо за урок, всё сработало. Долго искала как реализовать закрытие модального окна🤗

[xcabcz-xabcz]

хороший гайд.

еще можно фокус при открытии окна перемещать на на него же или на кнопку закрытия текущего окна.
сейчас, если открыть с клавиатуры, фокус остается на кнопке и еще один таб перепрыгивает на следуюущую кнопку для открытия модалки.(можно даже еще одну модалку открыть таким образом)

также можно после закрытия окна возвращаться на кнопку, которая его открыла.

[PalyufishkuRuSite]

За ссылочку на готовый код отдельное спасибо ))

[sergejchap]

Отличный урок и пример.
Как сделать чтобы в модальное окна заходил текст из text area. Также чтобы потом в зависимости от самого текста мод.окно зуммировалось с минимумом скролла.
Спасибо за урок.

[berry_vbes]

Это самый адекватный видос по ПопАпу который я видел, автор спасибо тебе
ТРЕБУЮ БОЛЬШЕ ВИДОСОВ 💩

[andrewc]

отличное объяснение, продолжайте в том же духе

[Stacy_Sims_]

Спасибо за видео, как отключить скролл сзади ?) Спасибо)

[igrun-dale]

Хороший ролик...Здравствуйте а не подскажете... какой добавить код... чтобы при закрытии окна.... выключался звук в видео которое в модельном окне....заранее спасибо..

[timkaop]

есть баги: прыгает шапка при открытии-закрытии и при открытии окна в месте где был скролл становиться пусто и если была секция с каким нибудь бэкграундом, допустим цвет или картинка, то вместо цвета или картинки остаётся белый промежуток на месте скролла, то есть ширина секции остаётся такой же, а скролл убирается

[AlexeyAlexey-gg]

Почему не через html тег dialog ? Намного меньше js кода, также фокус сам правильно подстраивается, закрытие различными способами уже готово. Поддержка по caniuse 93%

[asgard]

Максим привет. Можешь подсказать будет ли прокручиваться контент под модальным окном колесиком мышки? Вроде ты ответил, нажимаю на «ответ», а ответа нет, пусто.

[asgard]

Круто. А я вот не понял один момент. С таким модальным окном на сайте будет скролиться контент под ним если колесиком мыши крутить?