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

Поділитися
Вставка
  • Опубліковано 10 лис 2024

КОМЕНТАРІ • 57

  • @petersen1554
    @petersen1554 Рік тому +2

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

  • @yurkaronin
    @yurkaronin 3 роки тому +4

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

    • @maxgraph
      @maxgraph  3 роки тому

      Пожалуйста)

  • @HikariPash
    @HikariPash 7 місяців тому

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

    • @maxgraph
      @maxgraph  6 місяців тому

      Пожалуйста)

  • @_pheax
    @_pheax 2 роки тому +1

    круто, спасибо Max

    • @maxgraph
      @maxgraph  2 роки тому

      Пожалуйста)

  • @арсентийшуть-т4д

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

  • @ratmetall6664
    @ratmetall6664 Рік тому

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

  • @djdrey4539
    @djdrey4539 3 місяці тому

    огромное спасибо

  • @ЮлияЛебедева-б3и
    @ЮлияЛебедева-б3и 11 місяців тому

    Спасибо!

    • @maxgraph
      @maxgraph  11 місяців тому

      Пожалуйста)

  • @Freedom-77
    @Freedom-77 Рік тому +1

    Спасибо

  • @МарияМария-ю4с
    @МарияМария-ю4с 5 місяців тому

    спасибо сенсеюшка🥰🥰🥰🥰

  • @Fairuza22
    @Fairuza22 Рік тому

    спасибо помогли очень

  • @bandrones
    @bandrones Рік тому

    спасибо, пригодилось!

  • @saharaprotocol
    @saharaprotocol Рік тому

    Спасибо.

  • @miraigrafit7865
    @miraigrafit7865 3 роки тому +1

    Классно!

  • @oloCAKEolo
    @oloCAKEolo 4 роки тому +3

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

    • @maxgraph
      @maxgraph  4 роки тому +1

      Посмотрите следующие видео, там в порядке?)

  • @olehua7602
    @olehua7602 Рік тому

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

    • @maxgraph
      @maxgraph  Рік тому

      Js решения как раз и есть

  • @asgard1428
    @asgard1428 2 роки тому +4

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

  • @Denik-is6gi
    @Denik-is6gi 2 роки тому +1

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

    • @maxgraph
      @maxgraph  2 роки тому

      У меня нет. Попробуйте мой плагин для них, называется graph-modal

    • @Denik-is6gi
      @Denik-is6gi 2 роки тому

      О, попробую, спасибо!)

  • @danilkovalev_usa
    @danilkovalev_usa Рік тому +1

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

    • @maxgraph
      @maxgraph  Рік тому

      Сделать обратное действие открытию
      А дизайн уже не моя сторона)

  • @дмитрийрыжков-ш6ф
    @дмитрийрыжков-ш6ф 4 роки тому +1

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

    • @maxgraph
      @maxgraph  4 роки тому

      Наверняка можно
      Не смешивать это как? А как с дом моделью работать?

    • @Andrii_Konohrai
      @Andrii_Konohrai 4 роки тому

      Я через кнопку-ссылку делал. У модалки айдишка, а ссылка на айдишку ссылает)

  • @danilonishenko3202
    @danilonishenko3202 2 роки тому +1

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

    • @WockeezChannel
      @WockeezChannel Рік тому

      target - ссылка на элемент по которому кликнули, currentTarget - ссылка на элемент на котором установлен обработчик (похож на this)

  • @ВсеволодКарпиков
    @ВсеволодКарпиков 3 роки тому +2

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

    • @maxgraph
      @maxgraph  3 роки тому +2

      js-решения №11 смотрите - там целый плагин я написал)

  • @РоманСтоляров-й3к
    @РоманСтоляров-й3к 2 роки тому +1

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

  • @olegonkos
    @olegonkos 4 роки тому

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

  • @Анна-д7ж2з
    @Анна-д7ж2з 4 роки тому +1

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

    • @maxgraph
      @maxgraph  4 роки тому +1

      А это я видимо поторопился) там нужно давать дисплей флекс при открытии модалки :)

    • @Анна-д7ж2з
      @Анна-д7ж2з 4 роки тому +1

      @@maxgraph а как flex и none вместе существуют? None по приоритету выше, чем flex?

    • @maxgraph
      @maxgraph  4 роки тому +1

      Да

  • @ВадимЯковенко-я1в
    @ВадимЯковенко-я1в 4 роки тому

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

    • @maxgraph
      @maxgraph  4 роки тому

      Именно, про это недавно вышло отдельное видео, чтобы не сбивать все в кучу :)

    • @ВадимЯковенко-я1в
      @ВадимЯковенко-я1в 4 роки тому +1

      @@maxgraph точно, спасибо! нашел, обязательно гляну, интересна реализация =) Так то и правда, "заморозку" скрола можно держать в отдельной функции и вызывать при открытии модального окна.

  • @olegonkos
    @olegonkos 4 роки тому

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

    • @maxgraph
      @maxgraph  4 роки тому +2

      Потому что изменилась реализация, нашелся вариант получше.
      Но скоро покажу полный цикл создания модального окна с нуля, сделаем целый плагин)

    • @olegonkos
      @olegonkos 4 роки тому

      @@maxgraph , ну так и объяснили бы почему именно так. Конечно, никто никому не должен разжевывать. Но именно подробности привлекают на канал, а не простое манипулирование кодом.

    • @maxgraph
      @maxgraph  4 роки тому

      @@olegonkos Спасибо за критику :) Буду стараться.

  • @ОлегЛевашов-м6р
    @ОлегЛевашов-м6р 11 місяців тому

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

  • @saveliikosevich620
    @saveliikosevich620 9 місяців тому

    спасибо

  • @РоманСтоляров-й3к
    @РоманСтоляров-й3к 2 роки тому

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

    • @maxgraph
      @maxgraph  2 роки тому

      Тут смотреть надо

    • @РоманСтоляров-й3к
      @РоманСтоляров-й3к 2 роки тому

      @@maxgraph А как бы нам это посмотреть? Теперь всё время думаю об этом.