JS-решения №2. Модальные окна на чистом JS

Привет! Сегодня показываю, как можно легко сделать модальные окна на чистом Js, без плагинов

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

#обучение #popup #модальные окна

[HikariPash]

Огромное спасибо!! Для меня это было ооочень актуально. Я так счастлива)))

[ratmetall]

Макс! Я в "шоке" :( Добавил по аналогии еще пять окон (только html) и работают все 9 окон:) Капец! Ты ВОЛШЕБНИК!!! супер! Я не знаю как выразить свое восхищение! Нет слов! СПАСИБО!!

[petersen]

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

[yurkaronin]

очень пригодился ваш урок. Спасибо огромное, Максим :)

[арсентийшуть-тд]

Класс) сколько радости от того что получилось))

[asgard]

Я думаю что минуте на десятой у всех взорвалась голова от переделок.
Урок хороший, но если это урок, то надо готовиться к не нему и объяснять по ходу написания кода что для чего. Если взять и просто тупо потом все переписать не разбираясь то пойдет конечно, а так трудно для понимания.

[olehua]

Спасибо за очередное полезное видео. Давно хочу спросить есть ли у Вас уроки по JS?

[Denik-isgi]

Хороший и полезный урок. Спасибо!! Есть вопрос: сделал такие модалки, везде вроде открывается а почему то на айфоне ни в сафари ни в гугл они не открываются. Было ли у вас такое?

[oloCAKEolo]

Видео отличное, но: Сделайте звук заставки и голоса одинаковым, а то с самого начала оглушает, а потом ничего не слышно :)

[danilkovalev_usa]

Здравствуйте, а как сделать через крестик закрытие формы? Хотелось бы сделать более понятный дизайн для людей открывающих модальное окно с экрана телефона? Заранее спасибо за ответ

[дмитрийрыжков-шф]

А не через data атрибуты это как-то можно реализовать? Просто слышал такое мнение что смешивать js с тегами html не рекомендуется, насколько это верно?

[danilonishenko]

Отличается ли как то event. target и event.CurrentTarget?

[ВсеволодКарпиков]

круто, скрипт, который я писал, тоже на дэйта-атрибутах. а запишете видео о том как сделать их более доступными с клавиатуры? очень удобно когда фокус ставится на окно, и мы не можем вылететь с него, нажимая ТАБ (фокус обратно переносится на самый первый элемент модалки)?

[РоманСтоляров-йк]

Почему то, когда код был написан идентично коду на этапе 5:36, консоль при нажатии на кнопки, выдала сообщение - null. То есть при событии "клик", в функцию path записывается значение null. А функция getAttribute не работает. Правда, код я набирал в VS Code. В причинах так и не смог разобраться. :(

[Анна-джз]

Все круто и доступно)
Есть вопрос, но не по JS. А как так получается, что в .modal используется и display: flex и display: none, а потом еще и класс добавляется с display: block. Flex сам по себе живет, a block отключает none?

[olegonkos]

а зачем дата атрибуты? по классам нельзя что ль привязать?

[ВадимЯковенко-яв]

а может надо добавить "заморозку" прокрутки?

[olegonkos]

немного сумбурно. Не совсем понятны некоторые действия. Нет, вам конечно понятны )). Вы просто говорите ЭТО убираем, ЭТО нам не нужно теперь. Например, на 7:29 не понятно почему вдруг надо было поменять один код на другой.

[ОлегЛевашов-мр]

А что, нельзя было сразу писать правильный код? Без экспериментальных строк которые появляются и тут же исчезают, поскольку оказываются ненужными. Грамотный чувак, но преподавать не умеет. Пустых слов и пустого кода море, а работы на 5 копеек. Эти окна известны лет двадцать как минимум и писались легко на базовом Js. Код был более простой, и прозрачный. Зачем надо перебирать объекты документа в цикле, если можно использовать древний метод кнопки onclick? Имхо, за знания 5, за реализацию 3-

[РоманСтоляров-йк]

Почему то, когда код был написан идентично коду на этапе 5:36, консоль при нажатии на кнопки, выдала сообщение - null. То есть при событии "клик", в функцию path записывается значение null. А функция getAttribute не работает. Правда, код я набирал в VS Code. В причинах так и не смог разобраться. :(