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

Поделиться
HTML-код
  • Опубликовано: 21 окт 2024

Комментарии • 46

  • @kirill5675
    @kirill5675 4 года назад +4

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

  • @alexdubkov6998
    @alexdubkov6998 4 года назад +1

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

    • @maxgraph
      @maxgraph  4 года назад

      Пожалуйста)

  • @daveyeghiazaryan4722
    @daveyeghiazaryan4722 4 года назад +11

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

    • @maxgraph
      @maxgraph  4 года назад

      Спасибо!)

  • @onebytesiteit30-75
    @onebytesiteit30-75 4 года назад +3

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

  • @dmitriykarabasov1440
    @dmitriykarabasov1440 Год назад

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

  • @Александр-ы8х3т
    @Александр-ы8х3т 3 года назад

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

  • @tovjukov
    @tovjukov 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад +1

      Пожалуйста)

  • @Denik-is6gi
    @Denik-is6gi 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад +1

      Да, все верно

  • @grind3204
    @grind3204 3 года назад

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

  • @ThePerseyka
    @ThePerseyka 10 месяцев назад

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

  • @vixazomova5899
    @vixazomova5899 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

      Да, точно)

  • @СлавикГусев-л4и
    @СлавикГусев-л4и 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад +1

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

    • @СлавикГусев-л4и
      @СлавикГусев-л4и 2 года назад

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

  • @vitalb7907
    @vitalb7907 2 года назад +1

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

    • @maxgraph
      @maxgraph  2 года назад

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

    • @vitalb7907
      @vitalb7907 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад

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

  • @Кикос-л5е
    @Кикос-л5е 4 года назад +1

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

    • @maxgraph
      @maxgraph  4 года назад

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

  • @alym.aleksey
    @alym.aleksey 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

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

  • @vitalb7907
    @vitalb7907 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

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

  • @МаксимСергеевич-п2б

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

    • @maxgraph
      @maxgraph  2 года назад

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

  • @ВадимЯковенко-я1в
    @ВадимЯковенко-я1в 3 года назад

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

  • @ka1dos248
    @ka1dos248 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад

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

    • @ka1dos248
      @ka1dos248 2 года назад

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

  • @ВадимЯковенко-я1в
    @ВадимЯковенко-я1в 3 года назад

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

  • @Dioni-h5q
    @Dioni-h5q 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад +1

      Попробуйте сделать окно браузера меньше модалки, поймёте

  • @Uncaught_in_promise
    @Uncaught_in_promise 4 года назад

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

    • @maxgraph
      @maxgraph  4 года назад +1

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

    • @maxgraph
      @maxgraph  4 года назад +1

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

  • @DimaGaranin
    @DimaGaranin 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

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

  • @ВадимЯковенко-я1в
    @ВадимЯковенко-я1в 3 года назад

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