Модальное окно (Popup) на REACT JS. Переиспользуемое всплывающее окно на REACT JS
HTML-код
- Опубликовано: 2 окт 2020
- В этом уроке мы cделаем адаптивное, переиспользуемое модальное\всплывающее окно на REACT JS.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Поддержать меня и мой канал вы можете по ссылкам ниже.
Qiwi кошелек - www.qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469 
Наука
Настолько без воды что аж в горле пересохло 😅
🤣
Обычно я смотрю учебные видосы на скорости 1.25, но тут такая концентрация инфы без воды, что порой приходилось пересматривать некоторые моменты. Крутотень!)
донесение инфы на высочайшем уровне - всего 5 минут и все по делу! спасибо!
Самый топовый видос насчет модалок, быстро и по факту, спасибо!
Спасибо большое!)
Спасибо. Для меня начинающего это очень полезное видео. Конечно часа 3 разбирался, но получилось. И даже интегрировал в свой учебный материал. И всё работает.
Класс!
Коротко, ясно, по факту. Очень помогают подобные видео. Лайк, подписка и просмотр других тем на упреждение на канале)
Все просто супер, огромное спасибо за такое объяснение. Все четко и без воды как всегда 🤝
Приятно слушать тебя, быстро и по делу! годный контент
Улёт, лаконично, понятно, грамотно. Как всегда на высоте)
Для поддержки канала)) Давай серию уроков про jest, тестировать можно одно из тех приложений что ты делал в предыдущих видео. Думаю многим будет актуально.
Мой любимый канал про React, Просто ТОП!!! Благодаря вам я начинаю любить React. Cпасибо большое за максималино полезный контент, без никакой воды. Если устроюсь на работу с меня чаевые!!
И как?
Огромное спасибо за Ваши видео, очень помогают, все коротко и ясно
Спасибо за то, что ты делаешь! Очень круто!
Большое спасибо, все понятно, доходчиво, быстро и самое главное, что, только сама суть вопроса без воды!
Без воды, чётко и ясно. Лайк!
Благодарю!)
Да я просто не могу перестать восхищаться тобой, я почти на каждый вопрос нахожу ссылку на твоё видео.
быстро, без воды и по сути дела. оч крутое видео
Огромное человеческое спасибо!!! Это моя первая таска но первой работе!!!!
Спасибо, очень полезный контент делаешь, однозначно лайк)
Спасибо! Лаконично и очень круто изложен материал!
Спасибо, как всегда все четко и без воды
Чел ты вообще крут!!!Кратко, чётко, подписка и лайк
Спасибо друг!)))
топ видос! спасибо огромное. только начал изучать реакт и было супер полезно! спасибо большое!
На канале много интересно!) Рекомендую! спасибо вам!
Спасибо большое!! Очень понятно ,ясно и коротко. Очень помогло
Спасибо!
Круто! Спасибо, было полезно. Подчерпнул для себя пару клевых фишечек!
лучший канал, лайк без вопросов и коммент для поддержки модальное окно на react js
Спасибо!)
Спасибо! Здорово! Было бы здорово сразу на тайскрипте объяснять, мне кажется, так более понятно, с камкими типами имеем дело. Спасибо!!!! Помогло решить таск
Это лучший блогер по программированию, которого я смотрел
Спасибо! Круто объясняете 🔥🔥🔥
Cпасибо большое за максималино полезный контент.
Спасибо, очень помог мне) Как раз искал стоящий контет по Попапу
Очень интересно, буду использовать 👍
Один из самых доступных гайдов по модальным окнам
Если честно, не знал, что pointer events none позволяет взаимодействовать как бы сквозь блок, думал, что это свойство просто блокирует взаимодействие с внутренним контентом, но сквозь контент не даёт возможности что-то делать, для меня это вообще открытие века, огромное спасибо😂
Спасибо. Очень простая и в тоже время крутая модалка
Спасибо! Удачи тебе с каналом.!✌🏾
Спасибо друг!)
@@UlbiTV у вас в описании в блоке "Разработка fullstack MERN web приложения" при переходе по первым 2 ссылкам - "Плейлист не существует".
@@RinatYouldashbaev Спасибо!) я удалил эти плейлисты, тк люди путаются, есть один, где уроки идут последовательно!)
спасибо тебе большое, очень доступно и понятно! подписался)
Большое спасибо за видео, воспользовался в 2021 :)
Спасибо! Лаконично и понятно.
Круто! Спасибо за урок!
Спасибо за видео!
Огромное спасибо!
Спасибо! Понятно и коротко.
Спасибо за полезное видео.
Все как всегда полезно)) Не знаю что добавить , но для развития канала думаю комент не будет лишним))
Огромное спасибо! Чётко
как это тут нет моего лайка? отличный гайд!
Спасибо, было очень полезно.
Отлично, спасибо
Крутейшее, спасибо!
Спасибо!)
Вот это разжевал) вот прям как надо!
Супер! То что нужно!!!!
то что надо👍 спасибо!
Спасибо! Моё почтение!!!
По поводу идеи, redux'a с хуками бы побольше, в интернете как то мало информации или она растянута, также что то про useMemo или useCallback посмотрел, про кастомные хуки тоже, спасибо за видео, кратко и полезно.
Спасибо, про кастомные хуки будет 💯)
Приветствую) Топ контент) Но почему не используешь createPortal ???
топ контент, продолжай в том же духе )
Благодарю!)
Огонь контент!!!
большое спасибо, лайк
Всё круто, продолжай дальше
Спасибо дружище))
Ты капитальный красавчик!!!
Спасибо!
Толково, помог! Спасибо
И вам спасибо!)
Thanks a lot! it was really useful
Ролик реально спасение
Лучший!
Все отлично, объяснения к модальному окну, Вопрос а если сделать модальное окно появлялось по заданному времени например по setTimeout?
Огонь! 🔥
Отличное видео, как и видео про бургер меню. Заметил, что в обоих произносите stopPropagation не правильно (propagINation вместо propagation). Еще хотел добавить, что использование этой функции считается плохой практикой (некоторые даже говорят evil practice), и лучше ее избегать
Спасибо за качественный контент. У меня остался вопрос - можно ли открывать 2 разные модалки 2 разными кнопками в одном компоненте? А если можно то как.
а есть на гите код этого урока?
спасибо тебе большое!
Про children не знал даже, это так в любой компонент что то встраивать можно получается
Не зря старался значит)
можете пожалуйста сказать как сделать так чтобы когда активно окно нельзя было скорлить фон. я посмотрел что есть стиль background-attachment: fixed; . но он не помог
Однозначно лайк
Спасибо!)
как сделать кнопку(крестик) сверху справа у модального окна? для закрытия
Единственный норм ролик на эту тему, в остальных все адски усложняют. Жаль только, что тема блокировки скролла не раскрыта
если речь про скролл страницы, то достаточно навесить на body стиль overflow: hidden, а после закрытия модалки убрать это правило
Прикольно!
Оч классно.
А по интернационализации видос есть? Я чёт в упор не вижу
Оч клёво рассказываешь, всё по полкам
Здорово конечно, но как де блокировать скролл body при о крытом модальном окне?
Привет, классно было бы через портал реализовать, чтобы компонент точно подходил под все нужды
Спасибо, дружище!
.
.
.
.
ещё пара слов, чтобы коммент был длиннее :)
классный видеоурок! а как убрать скрол body при открытом модальном окне?
а как overlay в отдельный компонент можно вывести?
Дякую! Дуже швидко і доступно!
огонь🔥🔥🔥
Было бы очень круто, если бы ты собрал свою мини библиотеку с переиспользуемыми компонентати. Самыми частато встречающимися. Всякие логин формы, инпуты, чекбоксы, кнопочки(дизейблейд, например, когда данные подгружаются) и тд.))
Учту!)
Для этого и существуют material ui, Ant-Design и другие)
ты совсем? И кто все это будет поддерживать, обновлять, реакт не стоит на месте, как и требования к функционалу, он может в любой момент измениться. Представь себе сколько времени на это будет уходить
Если правильно вас понял, то такая штука уже есть headless ui называется)
лучший!!
если на одной странице несколько модалок, это под каждую модалку нужно useState создавать? для открытия/скрытия
Да
Хотелось бы увидеть пример, где много карточек и при клике на любую из них открывалась бы модалка с данными из карточки, по которой кликнули. Мало опыта в этом у многих и тема пошла бы на ура.
Тот же принцип. Просто каждая карточка, должна быть элементом с модальным окном. На карточку добавь обработку клика (как на кнопке из видео) и всё
@@rodion_dev но тогда у каждой карточки будет своя модалка, а это нарушает принцип DRY.
@@frednoby8531 Поэтому и нужно использовать элементы, а не копировать и вставлять код. Если тебе нужно вставить 10 карточек, не получится не повторяться.
@@rodion_dev а если стоит задача не повторяться? Модалку нужно вывести один раз, а вызывать её могут разные компоненты, попутно передавая внутрь данные.
@@frednoby8531 Можно тогда сделать переменную, которая будет принимать в себя контент модального окна. При нажатии на кнопку оно будет обновляться и показывать модалку
Круто)
Ulbi - ты Бог!!! Благодарю от всей души за то что даешь нам это знание!!!
Большое спасибо! У меня возник вопрос как сделать так, что бы разные кнопки открывали различный контент в таком модальном окне.
можешь просто использовать с разными children столько раз, сколько нужно
Ждем ролик что бы внедрять модалку через контекст) Для продвинутых 😅
Круть
Как вызвать другое модельное окно и модального окна?
Ультра лайк
Лукас!
"..если было интересно..." - мне кажется, тебе давно пора не использовать эту фразу, потому как ВСЕ ТВОИ ВИДЕО ПИПЕЦ КАКИЕ ИНТЕРЕСНЫЕ И ПОЛЕЗНЫЕ!! Спасибо тебе!
Я зелень в реакте и что-то вообще не понял как переиспользовать модалку, если у меня в меню например 5 кнопок и для каждой должна открываться своя компонента с необходимым контентом