Модальные окна (попапы) на HTML CSS JavaScript. Всплывающие окна. Как это сделать?
Вставка
- Опубліковано 31 тра 2024
- Модальные окна, их еще называют всплывающие окна или попапы от английского (pop-up), сегодня незаменимый атрибут практически любого сайта. В этом выпуске я покажу как их правильно верстать, а так же два варианта работы - с помощью CSS псевдокласса :target и, более мощный, с использованием JavaScript. Поехали!
🔴 Материалы выпуска: / materialy-k-pro-37731050
☝️Урок по CSS свойству transition:
• Все о CSS переходах (t...
☝️Урок по CSS свойству transform:
• CSS transform. 2D и 3D...
00:00 - Вступление
00:56 - Верстка модального окна HTML
02:28 - Верстка модального окна CSS
06:41 - Открытие модального окна с помощью CSS target
13:16 - Анимация открытия модального окна с помощью CSS
16:25 - Открытие модального окна с помощью JavaScript
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Есть варианты по улучшению? Пиши в комментариях!
Переписать код можно с экрана, ну а для ленивых готовый результат урока ищи на патреоне по ссылке ниже 👇
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Для фиксированных элементов лучше использовать margin(в таком случае элемент будет виден весь, в случае с padding 17px элемента будут обрезаны)
Timeout для закрытия окна лучше получить с помощью window.getComputedStyle(в этом случае его не нужно хардкодить каждый раз при смене длительности в стилях) или можно использовать transitionend ивент, чтобы быть в курсе, что анимация закончилась и можно что-то сделать
Вообщем для улучшений большое поле деятельности. Очень хорошо, что обращайте внимание на такие мелочи как скачки контента, не многие на это обращают внимание, к сожалению.
Евгений привет!, Круто как всегда! Сейчас прикину, как сделать ещё вариант, без js . Если не возражаешь, сюда скину!
Спасибо! Прогоню все на практике
Конечно, давай)
Есть один вариант.Продолжение курса фронтенд и видеоуроки по джаваскрипт
просто лучший ! шикарный разбор конкретной задачи без лишней "воды"
Смотрел много разных видео эти уроки одни из лучших просто и понятно и съемка хорошая так держать. Спасибо!
Ничего себе как всё заморожено!!! Гениально. Спасибо за подробные объяснения!!! Всё круто!!!
Отличные уроки! Сначала думал очередной треш обрывками, а тут детально с нуля, доступно и не нудно. Хочется смотреть и смотреть, а то в других видео засыпаю через 5 минут после монотонности. Подписался на канал. Очень рад! Спасибо!
Жека, у тебя самый лучший канал! Всё очень круто рассказываешь и показываешь, а главное - ты такой жизнерадостный и это вдохновляет! Спасибо!
Спасибо. Все очень четко и без воды. Да и приятно смотреть без хрюканей и чая с плюшками,и паузами на котов. Однозначно лайк.
Спасибо!
Спасибо за простые и доступные уроки. Ты настоящий герой!
Единственный канал на котором ставлю лайк еще до просмотра, потому что уверен, что урок сделан на высшем уровне! Жека, так держать!
Спасибо!
да да. я тоже жадный на лайки. на его канал нужно добавить еще несколько таких кнопок.
Женя, твой канал это кладезь знаний! спасибо)
Спасибо большое за простое и понятное видео! Целый день пыталась сделать модальное окно без JS, когда доделала - нашла этот материал. Оказывается можно было не мучиться!
Огромное тебе спасибо друг за все что ты делал и делаешь для людей. Ты лучший!!!
Как всегда полезно и не скучно. Спасибо за труд!!
Лучший, Жека! Как раз во время урок! Начал верстать макеты с модалками и твое видео вышел!
Супер, я рад!
Парень, ну ты прям очень крутой. Спасибо тебе огромнейшее за то, что делишься своими знаниями!!!!!!!!!!!!!
Спасибо большое за вашу работу! Отличная подача материала!
Легко и непринуждённо! Блестящий ролик!
очень элегантное решение со скролом бади, очень внятное и понятное объяснение, спасибо!
Женя, ты пушка гонка !!!
Круто показываешь, объясняешь.
Продолжай так-же 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
Спасибо за новый урок, как всегда круто, понятно и коротко 10 из 10))
Словами не передать, как Вы помогли )
Чтобы скрыть попап, не нужно дополнительно писать id=header для display-fixed элемента. Достаточно в ссылке написать href="##" этот якорь не приведёт к скроллу к началу страницы
Круть спасибо!
Да круть спасибо а просто задал левый класс. но этот способ быстрее.
Только валидатор будет в шоке)
Ребят! В топ его!
Огромное спасибо!
Это самый лучший канал про веб-фронтенд разработку где видео выходят регулярно, не скучные и отличного качества!!
Спасибо!
Очень понятно и толково! Спасибо тебе за работу, продолжай в том же духе! Ещё меся назад казалось всё это страшным сном, а сейчас уже сам делаю лендинги и даже с попАпами)) Всё твоя заслуга, спасибо, бро!
Я рад!
Господи, это лучший канал по верстке. Спасибо тебе огромное!!!
Пожалуйста!
Сейчас прохожу платный курс по фронтенд-разработке. Был приятно удивлен, когда это видео порекомендовал один из наставников, и сказал что в свое время оно ему очень помогло.
Жека, тебе огромная благодарность за твой труд, просто лучший!!!
Как говорится тренер тренеров, the best of the best! 💪🔥
Как всегда на высоте! Спасибо большое!
Пожалуйста!
A very detailed description of getting started with js
Я вас смотрел еще когда у меня не было работы, а теперь я работаю и применяю ваши знания на практике
Век живи век учись...
Вроде я не первый год занимаюсь разработкой сайтов, но смотря твои уроки каждый раз нахожу для себя что-то новое.
Довольно долго использовал Bootstrap, только лишь из-за его быстрых решений с теми же pop-up, готовой сеткой и прочими наработками и сквозь зубы мирился с кучей лишнего, что с ним подключалось.
И только благодаря твоим понятным урокам и наработкам, я отказался от него и начал создавать свои заготовки.
Спасибо за твой вклад!
Я очень рад!
Зачем подключать весь бутстрап? На странице кастоматизации выбираешь только сетку и её респонз и генеришь сборку только с этим.
Це напевно не реально вивчити, але треба пробувати. Дякую за вашу роботу!
Отличное видео, теперь я научился делать модальные окна, однозначно лайк!
Невероятно крутые уроки! Спасибо!
Пожалуйста!
Как всегда отлично! Спасибо, что на чистом JS
Очень вовремя, в принципе как всегда) Спасибо большое!
Пожалуйста!
Вообще классное видео, даже скептически подойти, вы довольно быстрои лаконично все рассказали. Хотя живой код всегда лучше. :)
Лучший!
Спасибо тебе за твою работу!!!
Пожалуйста!
Спасибо большое! Крутяк, как обычно !!!
Пожалуйста!
Крутейший профессионал своего дела 👍
Шикарно. Спасибо большое.
Очень уважаю тех, кто заморачивается на мелочах, которые для других не критичны.
Пожалуйста!
Спасибо за видео, очень полезно! Сам как-то делал свою реализацию модальных окон. Хотел рассказать с какими проблемами я столкнулся (ведь нет предела совершенству :)
1. Нажмите курсором в окне и проведите не отпуская до фона окна и отпустите :). Окно закроется, так как для клика считается общий предок. Получается, например если в окне есть форма - выделяешь текст и случайно уходишь за пределы модалки - окно закрывается :)
2. Фокус не замыкается в окне. Если при открытой модалке нажимать Tab, то фокус будет переходить под неё, страница будет скролится.
3. В IE11 Нижний margin у модалки не работал, оно прилипало к низу. Но в принципе, пользователи IE это заслужили :)
4. Если body задать overflow:hidden, в сафари IOS 11, если в модалке есть инпут - будет баг, что курсор уедет с input'a, но в IOS 12 это уже починили, рекомендуют ставить для body тоже position:fixed, но тогда возникает проблема с сохранением прокрутки, думаю сейчас можно уже забить :)
5. Если окну не давать display:none, то если в модалке проигрывается видео - то оно не выключается при закрытии окна, нужен доп. js код.
Вроде бы всё рассказал :), но в любом случае у вас отличное решение, особенно понравилось, что даётся сдвиг для всех fixed элементов, чтобы они не прыгали :)
Конечно работы еще хватает, но начало положено, спасибо!
@@FreelancerLifeStyle я могу дополнить идеи...
1. Что бы не было "мигания" затемнения при переключении МЕЖДУ окнами, можно затемняющий фон повесить на появляющийся body.lock::after , а для красоты можно еще добавить размытие для body.lock .wrapper
2. Пока основной баг - это body overflow:hidden - контент, естественно, скачет наверх. я решил переназначением $(window).scrollTop( lastTop ); , но тогда появляется проблема с фиксированных хедером, т.к. он лепится к верху body... не очень красиво. Тогда надо ещё и для хедера изменить позицию top, но это шаг в сторону гемороя, а не оптимизации... Пока решения не нашел.
3. Ещё я бы добавил всё таки какую то проверку, типа if(popupLink.tagName == 'BUTTON') и тогда брать не href а value, ведь часто попап вешают на button, а ссылка - это всё таки переход.
"1. Нажмите курсором в окне и проведите не отпуская до фона окна и отпустите" - лечится заменой 'click' на 'mousedown' , но я люблю делать нажатие на mouseup, так что клик в "молоко" делаю отдельно.
Решил вторую проблему?)
@@TheRAVbeard а ты решил баг с табом?
Спасибо за видео. Вот только что с Вашей помощью сделал выдвигающуюся корзину с правой стороны) Выглядит очень классно)
Но, на счёт адресной строки, Вы правы, возможно придётся потом и js код перепечатать
Топ, как раз искал как сделать попап окна. И тут твое видео )
Я рад!
Как всегда супер!
Спасибо!
Дружище, просто лучший
Женя, спасибо большое за видос!
Пожалуйста!
Круто, это лучший канал по вёрстке! Продолжай в том же духе!
Спасибо!
@@FreelancerLifeStyle как бы завистники не стали с вами бороться)
Согласен
@@dinir1000 Что? Зачем? 🤦
ОФИГЕННЫЙ урок Жека
Ну что ж погнали!!! Спасибо ЖЕКА ТЫ ЛУЧШИЙ :)!!!!
Как всегда топчик!) Сложно, но интересно)
Спасибо!
Спасибо огромное, но чтобы на js работало, пришлось несколько раз с нуля попереписывать, побеситься что не работает, но в итоге всё работает и я так рад :)
Женя, ты очень крутой! Спасибо тебе большое!!!
очень круто все показываешь, спасибо!
Это настолько круто, что просто взрыв мозга!
∞ лайков в карму.
Ты все делаешь креативно и профессионально. Ты крутой 👍 . Я все твои видео посмотрел.
Продолжай снимать пж
Спасибо!
@@FreelancerLifeStyle Рад что ответил. Ты мой самый лучший учитель.
Лайки
Лайк, просил в комментах эту тему, Евгений, вот за это спасибо, респект)
Очень круто доносишь информацию!
Спасибо!
Круто! Спасибо, очень интересно и познавательно
Я рад!
Спасибо! Смотрю твои уроки. Следующее большое дело буду оформлять в html. Ты делаешь крутую работу. Знай, что у тебя есть бесплатная юридическая консультация по любым вопросам.
Спасибо большое!
Спасибо за урок, очень полезно!
Як завжди ВОГОНЬ!!! З нетерпінням чекаю нове відео.
Дякую
Жека. Покажи як зробити слік слайдер в табах.
Здравствуйте! Благодарю за видео!
Годнота подъехала! Палец вверх 👍
Спасибо!
Здорово! Комар носа не подточит! Очень подробно и аккуратно!
JS всегда можно улучшить, а так спасибо!
Супер! спасибо за разные варианты)
Красава, четко все по полочкам разложил. Отличное видео !
Спасибо!
Отличное видео, спасибо за подробную инструкцию! :)
Пожалуйста!
Как всегда, все чётко и красиво подано.. Я вообще чел ленивый на комменты, но после просмотра, не могу не отметиться. ПОПАПЫ, ВСЕМ ПОПАПАМ - ПОПАПЫ !!!
Спасибо!
Супер 👍🏻 ось це-то подача інформації... Дякую
Большое спасибо за урок!
вот это проработка задачи. Век живи век учись :)
Спасибо!
Спасибо большое, ваш урок мне очень помог.
Я рад!
Музыка в начале просто бомба. Сразу лайк
Огромнейший респект!
Женя , спасибо за твою отзывчивость) . Мы просим , ты тут же выпускаешь нужный видосик. Самый-самый канал с обратной связью))
Пожалуйста!
Я ніколи не любив JS за незручний синтаксис та незрозумілу структуру, але ваше роз'яснення дало мені надію на те, щоб навчитись ним користуватись. Дякую за вашу діяльність!
Большое спасибо за видео, как всегда очень вовремя, как раз нужно для работы) Еще хотелось бы видео про структуру файлов для многостраничного сайта, хотя бы кратко. Знаю что уже не раз просили тебя о таком, попрошу и я еще раз))
Что-то придумаю)
Меня удивляет Ваше виртуозное владение CSS
Женя, спасибо!
Пожалуйста!
Такой радостный, когда видишь готовый результат)
я подписуш тебе а ты мне пж
Годно! Спасибо большое!
Пожалуйста!
За одни только анимации в видосе лайк, какой кайф
Я смотрел это видео в 2021 году. Очень круто!
Классно разобрано про полосу прокрутки.
Может кому-то будет полезно:
Быстрый и аккуратный крестик можно получить из символа +, повернув его на 45 градусов через транзишн ротэйт.
Нод-лист удобнее перебирать циклом forEach, чем for. Не поленитесь разобраться с ним.
Вместо прослушивателя событий на каждую ссылку лучше сделать один прослушиватель на секцию или даже документ, а внутри него делегировать условиями на что именно и как срабатывать. Что-то подобное как тут в функции закрытия модалки при клике мимо окна. Прямо в том же прослушивателе можно для всех остальных кликов на странице прописать остальные условия. Смотрите тему делегирование.
Получить боди можно без квериселектора, просто document.body.
Ещё проще крестик сделать - это использовать спецсимвол. В after или before content : "\2716"
Топчик, спасибо)
Побольше JS для развития молодежи)))🤤
Будут уроки
ти просто красавчик ! тільки хотів гуглити як робити і тут твоє відео , супер
Я радий)
Благодарю Вас за видео.
Отличный видос, помогло, сверстал картинки в макете binary с помощью модальных окон)
Попапы это круто! Кстати, часто встречаются в макетах звёздные рейтинги, можно было бы о них видос запилить. Это так, если тебе понравится идея. Видос как всегда очень информативный и полезный!
Рейтинг обязательно будет!
Большое спасибо, ваше видео помогло!
Спасибо за это видео, мне в работе оно уже не однократно пригодилось
Отлично!
Зачетные видео!!!
Спасибо!
Я новичок в js, посмотрел как прикрутить клавишу Esc к попапу, у меня код немного другой но функционал такой же.
Вот по поводу клавиши долго мучился с кодами ничего не получалось, потом посмотрел здесь learn.javascript.ru/keyboard-events
и получается, что свойство which с кодом клавиши устаревшее, у меня получилось такое условие event.code === 'Escape' и все заработало,
кстати для тех кто в коде использует горячие клавиши свойство code будет работать с теми же клавишами даже при смене раскладки.
А в остальном хорошее видео, снимай дальше уроки, только желательно без устаревших спецификаций.
Вот это Жека, ты заморочился!!!
Это гениально!!! Попап без дж это круто))))
пожалуйста!
Огромное спасибо за видео
Очень круто, спасибо!
Пожалуйста!
чувак, ты гений!
Спасибо большой
Больше видео по нативным JS
Спасибо!
Классные видео и эффекты. Ты будешь в топе даже если будешь снимать на веб камеру
Стараюсь делать интересно!