JS-решения №2. Модальные окна на чистом JS
ฝัง
- เผยแพร่เมื่อ 18 ต.ค. 2024
- Привет! Сегодня показываю, как можно легко сделать модальные окна на чистом Js, без плагинов
clck.ru/PyQSM - исходники видео на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxg...
Чат для верстальщиков: teleg.run/maxg...
#обучение #popup #модальные окна
Огромное спасибо!! Для меня это было ооочень актуально. Я так счастлива)))
Пожалуйста)
очень пригодился ваш урок. Спасибо огромное, Максим :)
Пожалуйста)
круто, все просто и понятно. не хватает только кнопки закрития модального окна, ибо на мобильных устройствах, при использовании в качестве контента, допустим картинок, зона клика для закрытия может быть не доступна.
Класс) сколько радости от того что получилось))
круто, спасибо Max
Пожалуйста)
огромное спасибо
Макс! Я в "шоке" :( Добавил по аналогии еще пять окон (только html) и ...... работают все 9 окон:) Капец! Ты ВОЛШЕБНИК!!! супер! Я не знаю как выразить свое восхищение! Нет слов! СПАСИБО!!
спасибо сенсеюшка🥰🥰🥰🥰
спасибо помогли очень
Спасибо
Пожалуйста)
спасибо, пригодилось!
Спасибо!
Пожалуйста)
Спасибо.
Хороший и полезный урок. Спасибо!! Есть вопрос: сделал такие модалки, везде вроде открывается а почему то на айфоне ни в сафари ни в гугл они не открываются. Было ли у вас такое?
У меня нет. Попробуйте мой плагин для них, называется graph-modal
О, попробую, спасибо!)
Классно!
Спасибо)
Спасибо за очередное полезное видео. Давно хочу спросить есть ли у Вас уроки по JS?
Js решения как раз и есть
Я думаю что минуте на десятой у всех взорвалась голова от переделок.
Урок хороший, но если это урок, то надо готовиться к не нему и объяснять по ходу написания кода что для чего. Если взять и просто тупо потом все переписать не разбираясь то пойдет конечно, а так трудно для понимания.
круто, скрипт, который я писал, тоже на дэйта-атрибутах. а запишете видео о том как сделать их более доступными с клавиатуры? очень удобно когда фокус ставится на окно, и мы не можем вылететь с него, нажимая ТАБ (фокус обратно переносится на самый первый элемент модалки)?
js-решения №11 смотрите - там целый плагин я написал)
Видео отличное, но: Сделайте звук заставки и голоса одинаковым, а то с самого начала оглушает, а потом ничего не слышно :)
Посмотрите следующие видео, там в порядке?)
Здравствуйте, а как сделать через крестик закрытие формы? Хотелось бы сделать более понятный дизайн для людей открывающих модальное окно с экрана телефона? Заранее спасибо за ответ
Сделать обратное действие открытию
А дизайн уже не моя сторона)
А не через data атрибуты это как-то можно реализовать? Просто слышал такое мнение что смешивать js с тегами html не рекомендуется, насколько это верно?
Наверняка можно
Не смешивать это как? А как с дом моделью работать?
Я через кнопку-ссылку делал. У модалки айдишка, а ссылка на айдишку ссылает)
Отличается ли как то event. target и event.CurrentTarget?
target - ссылка на элемент по которому кликнули, currentTarget - ссылка на элемент на котором установлен обработчик (похож на this)
Почему то, когда код был написан идентично коду на этапе 5:36, консоль при нажатии на кнопки, выдала сообщение - null. То есть при событии "клик", в функцию path записывается значение null. А функция getAttribute не работает. Правда, код я набирал в VS Code. В причинах так и не смог разобраться. :(
Тут смотреть надо
@@maxgraph А как бы нам это посмотреть? Теперь всё время думаю об этом.
а зачем дата атрибуты? по классам нельзя что ль привязать?
Удобно :)
а может надо добавить "заморозку" прокрутки?
Именно, про это недавно вышло отдельное видео, чтобы не сбивать все в кучу :)
@@maxgraph точно, спасибо! нашел, обязательно гляну, интересна реализация =) Так то и правда, "заморозку" скрола можно держать в отдельной функции и вызывать при открытии модального окна.
Все круто и доступно)
Есть вопрос, но не по JS. А как так получается, что в .modal используется и display: flex и display: none, а потом еще и класс добавляется с display: block. Flex сам по себе живет, a block отключает none?
А это я видимо поторопился) там нужно давать дисплей флекс при открытии модалки :)
@@maxgraph а как flex и none вместе существуют? None по приоритету выше, чем flex?
Да
немного сумбурно. Не совсем понятны некоторые действия. Нет, вам конечно понятны )). Вы просто говорите ЭТО убираем, ЭТО нам не нужно теперь. Например, на 7:29 не понятно почему вдруг надо было поменять один код на другой.
Потому что изменилась реализация, нашелся вариант получше.
Но скоро покажу полный цикл создания модального окна с нуля, сделаем целый плагин)
@@maxgraph , ну так и объяснили бы почему именно так. Конечно, никто никому не должен разжевывать. Но именно подробности привлекают на канал, а не простое манипулирование кодом.
@@olegonkos Спасибо за критику :) Буду стараться.
А что, нельзя было сразу писать правильный код? Без экспериментальных строк которые появляются и тут же исчезают, поскольку оказываются ненужными. Грамотный чувак, но преподавать не умеет. Пустых слов и пустого кода море, а работы на 5 копеек. Эти окна известны лет двадцать как минимум и писались легко на базовом Js. Код был более простой, и прозрачный. Зачем надо перебирать объекты документа в цикле, если можно использовать древний метод кнопки onclick? Имхо, за знания 5, за реализацию 3-
спасибо
Почему то, когда код был написан идентично коду на этапе 5:36, консоль при нажатии на кнопки, выдала сообщение - null. То есть при событии "клик", в функцию path записывается значение null. А функция getAttribute не работает. Правда, код я набирал в VS Code. В причинах так и не смог разобраться. :(