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

Рет қаралды 7,807

Күн бұрын

Привет! В новой части JS-решений я покажу, как делал свой собственный плагин модальных окон. Разберем, как сделать такое с нуля и использовать в проектах. Поехали!
Содержание:
00:00 - Вступление
00:23 - Рекомендация
00:37 - О том, что должно быть в модальном окне
02:40 - Пишем html для окон
06:40 - Пишем css для окон
13:30 - Пишем js-класс для реализации окна
01:03:13 - Заключение
github.com/maxdenaro/maxgraph... - исходники видео на GitHub
• JS-решения №7. Убираем... - про то, как убрать прыжок при открытии окна
• JS-решения №4. Универс... - как отключить скролл при открытии окна
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#ityoutubersru #плагин #модальноеокно

Пікірлер: 47

@kirill5675 3 жыл бұрын

Ничоси, реклама у Максима, растёшь)

@daveyeghiazaryan4722 3 жыл бұрын

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

@maxgraph 3 жыл бұрын

Спасибо!)

@onebytesiteit30-75 3 жыл бұрын

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

@dmitriykarabasov1440 Жыл бұрын

Превосходно, Мастер! Спасибо!

@alexdubkov6998 3 жыл бұрын

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

@maxgraph 3 жыл бұрын

Пожалуйста)

@user-jg8sf6ky5y 3 жыл бұрын

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

@maxgraph 3 жыл бұрын

Спасибо)

@tovjukov 3 жыл бұрын

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

@maxgraph 3 жыл бұрын

Пожалуйста)

@grind3204 3 жыл бұрын

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

@maxgraph 3 жыл бұрын

ок :)

@vixazomova5899 3 жыл бұрын

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

@maxgraph 3 жыл бұрын

Да, точно)

@user-dh4wz6yz7r 3 жыл бұрын

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

@maxgraph 3 жыл бұрын

ноду я не знаю :)

@user-sy8pf2rt1e 3 жыл бұрын

Вдохновившись старыми видео я сделал для отключения скрола мини плагин - github.com/Basovich/scroll_locker Все же отключать скрол надо не только в модалках, но и при открытии меню, галерей и так далее. За видео спасибо, по больше бы видео с практикой о Class, очень зашло, особенно прием с Object.assign(), как он работает я понимаю, но в примере плагина не могу дупля отбить как оно так передает при вызове в функцию)) И еще, можно было не bind-ить, прикол в том же, что this внутри слушателей это элемент на котором вызвали слушатель, но если заюзать стрелочную функцию, то такого контекста не будет, будет контекст из вне, а это как раз объект класса!

@alym.aleksey 3 жыл бұрын

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

@maxgraph 3 жыл бұрын

Ну можно подумать в эту сторону)

@ThePerseyka 7 ай бұрын

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

@Denik-is6gi Жыл бұрын

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

@maxgraph Жыл бұрын

Да, все верно

@user-sy8pf2rt1e 3 жыл бұрын

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

@user-bh2qf9qp4s 2 жыл бұрын

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

@maxgraph 2 жыл бұрын

Загугли graph-modal, там работает это

@user-bh2qf9qp4s 2 жыл бұрын

@@maxgraph благодарю.нашел. было бы здорово если бы получилось у тебя записать короткое видео с разбором ф-ционала при открытии модалки в модалке .и в целом о дополнительном ф-ционале полного плагина ,те аспекты которые ты не упоминал в видосе плагина)на ютубе мало кто рассказывает об этом.У тебя отличный контент. благодарю за труд)

@user-xt1ns1br7o 2 жыл бұрын

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

@maxgraph 2 жыл бұрын

Привет, через событие isOpen вызывать окно) методом open

@vitalb7907 2 жыл бұрын

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

@maxgraph 2 жыл бұрын

Нет существенной разницы

@vitalb7907 2 жыл бұрын

@@maxgraph через делегирование не происходит утечки и нагруженость на браузер?

@maxgraph 2 жыл бұрын

В данном случае если и есть, то небольшая

@vitalb7907 3 жыл бұрын

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

@maxgraph 3 жыл бұрын

Не, у меня яндекс) Решаю никак, просто гружу все туда и все)

@BMikel 3 жыл бұрын

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

@maxgraph 3 жыл бұрын

Ну надо думать) пока не задумывался над этим, но по идее да, ничего такого

@maxgraph 3 жыл бұрын

Находить предыдущий и следующий да и все

@ka1dos248 Жыл бұрын

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

@maxgraph Жыл бұрын

Два окна открывать не нужно никогда, всегда открыто только одно

@ka1dos248 Жыл бұрын

@@maxgraph Ну для примера любая форма + к ней политика. Как в моем случае.

@draggsbony5392 2 жыл бұрын

в данном плагине при закрытии модального окна, не важно по области вне модального окна, по кнопки закрытия или через esc страница скроллится вверх и затем возвращается в первоначальное положение, кто нибудь знает как исправить upd: если убрать функции блокировки и разблокировки body, то проблема пропадает, но появляется другая, теперь у нас не блокируется body upd2: проблема оказалась в бутстрапе, а именно в файле bootstrap-reboot и его обнуляющих стилях, если заменить файл на другое обнуление, то проблема уйдет, возможно кому то пригодится

@DimaGaranin 3 жыл бұрын

keyCode на mdn вроде как устарела и рекомендуют использовать code просто

@maxgraph 3 жыл бұрын

Да, видел. Но неважно)

@user-sy8pf2rt1e 3 жыл бұрын

developer.mozilla.org/ru/docs/Web/API/Element/closest - Метод Element.closest() возвращает ближайший родительский элемент (или сам элемент), который соответствует заданному CSS-селектору или null, если таковых элементов вообще нет. ИЛИ САМ ЭЛЕМЕНТ. То есть проверка на класс на 51-52 минуте не надо.