JS-решения №11. Создание плагина для модальных окон

Привет! В новой части JS-решений я покажу, как делал свой собственный плагин модальных окон. Разберем, как сделать такое с нуля и использовать в проектах. Поехали!

Содержание:
00:00 - Вступление
00:23 - Рекомендация
00:37 - О том, что должно быть в модальном окне
02:40 - Пишем html для окон
06:40 - Пишем css для окон
13:30 - Пишем js-класс для реализации окна
01:03:13 - Заключение

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

#ityoutubersru #плагин #модальноеокно

[daveyeghiazaryan]

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

[alexdubkov]

За детальный разбор правильной навигации только внутри модального окна - отдельное спасибо!

[onebytesiteit-]

Все так доходчиво круто.
Написание задачи изначально - это хороший подход.
Все кто смотрит лайк и подписка must have.

[Александр-ыхт]

Хороший контент и полезный материал, впринципе как обычно. Спасибо. Ждемс курс по js, надеюсь поскорее ты его запилишь.

[tovjukov]

Спасибо за твои уроки. Хорошо подаешь материал.

[Denik-isgi]

Максим, сейчас пробую использовать ваш плагин а работе и не очень понял такой момент. Там получается есть див с классом "graph-modal" и в этот один див нужно вложить все модальные окна которые есть на сайте? Т.е. все "graph-modal__container" вкладываются в один "graph-modal"?

[grind]

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

[ThePerseyka]

А есть возможность сделать анимацию закрытия модального окна?

[vixazomova]

Интересный плагин. Уберите только для disable-scroll свойство position: relative; Там ведь ниже есть position: fixed;

[vitalb]

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

[МаксимСергеевич-пб]

Привет спасибо за плагин! А как быть если нужно после нажатии на кнопку показать еще одно окно, (Заявка успешно отправлена итд?)

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

Все же отключать скрол надо не только в модалках, но и при открытии меню, галерей и так далее.

За видео спасибо, по больше бы видео с практикой о Class, очень зашло, особенно прием с Object.assign(), как он работает я понимаю, но в примере плагина не могу дупля отбить как оно так передает при вызове в функцию))

И еще, можно было не bind-ить, прикол в том же, что this внутри слушателей это элемент на котором вызвали слушатель, но если заюзать стрелочную функцию, то такого контекста не будет, будет контекст из вне, а это как раз объект класса!

[СлавикГусев-ли]

Видос хорош, а где найти твою реализацию при открытии нескольких модальных окон ?например когда внутри открытой модалки есть кнопка открытия ещё одной модалки

[vitalb]

привет. а смотрю ты активно используешь бекап файлов через GoogleDive. скажи пожалуйста. я вот тоже хочу настроить нормальный бекап своих файлов и проектов. но у меня большая проблема в том что в тех папках которые я пытаюсь забекапить на тот же гуглДрайв - у меня есть папки типу node_modules. Расскажи пожалуйста как ты решаешь данную проблему. Будет здорово если это все уместиться в ответе на этот комментарий. Спасибо :)

[Кикос-ле]

Макс, круто, можешь еще сделать в духе модульности? Ты node.js знаешь было бы круто что бы ты сделать API (какого то виджета или какой то мини конструктор чего то ...) что скажешь?

[alym.aleksey]

Неплохо, взял отсюда пару интересных моментов, но есть одно место, которое отталкивает, чтобы не было прыжков нам надо в вертске найти ВСЕ места, где блоки выходят из общего потока (fixed, absolute). Не думал какой-нибудь вариант без этого или же автоматизировать этот процесс, не заставляя накидывать вручную этот класс? получается, что внедряя этот плагин тебе надо прошерстить всю верстку, найти все эти блоки вне потока и накинуть им класс

Только сегодня посмотрел твоё видео про функции css min max clamp, clamp можно использовать уже тут для задания размера модалки в зависимости от вьюпорта

[kados]

А как можно сделать когда открыто 2 модальных окна, и одно закрываешь, чтобы закрывалось только то на которое нажал?

[Uncaught_in_promise]

а возможно переключатели добавить между смежными окнами, не покидая модального окна? как буд-то в магнифик попап. Вот здоровол было бы...

[Dioni-hq]

А зачем псевдоэелемент для блока с классом 'modal' и такие манипуляции с выравниванием, вместо использования flex?

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

pointer-events: none; вместо изменения значения дисплея. Что бы не парится с таймаутами