Модальные окна (попапы) на HTML CSS JavaScript. Всплывающие окна. Как это сделать?
Vložit
- čas přidán 5. 06. 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 . Если не возражаешь, сюда скину!
Спасибо! Прогоню все на практике
Конечно, давай)
Есть один вариант.Продолжение курса фронтенд и видеоуроки по джаваскрипт
Единственный канал на котором ставлю лайк еще до просмотра, потому что уверен, что урок сделан на высшем уровне! Жека, так держать!
Спасибо!
да да. я тоже жадный на лайки. на его канал нужно добавить еще несколько таких кнопок.
Это самый лучший канал про веб-фронтенд разработку где видео выходят регулярно, не скучные и отличного качества!!
Спасибо!
Лучший, Жека! Как раз во время урок! Начал верстать макеты с модалками и твое видео вышел!
Супер, я рад!
Век живи век учись...
Вроде я не первый год занимаюсь разработкой сайтов, но смотря твои уроки каждый раз нахожу для себя что-то новое.
Довольно долго использовал Bootstrap, только лишь из-за его быстрых решений с теми же pop-up, готовой сеткой и прочими наработками и сквозь зубы мирился с кучей лишнего, что с ним подключалось.
И только благодаря твоим понятным урокам и наработкам, я отказался от него и начал создавать свои заготовки.
Спасибо за твой вклад!
Я очень рад!
Зачем подключать весь бутстрап? На странице кастоматизации выбираешь только сетку и её респонз и генеришь сборку только с этим.
просто лучший ! шикарный разбор конкретной задачи без лишней "воды"
Чтобы скрыть попап, не нужно дополнительно писать id=header для display-fixed элемента. Достаточно в ссылке написать href="##" этот якорь не приведёт к скроллу к началу страницы
Круть спасибо!
Да круть спасибо а просто задал левый класс. но этот способ быстрее.
Только валидатор будет в шоке)
Ребят! В топ его!
Огромное спасибо!
Спасибо. Все очень четко и без воды. Да и приятно смотреть без хрюканей и чая с плюшками,и паузами на котов. Однозначно лайк.
Спасибо!
Как всегда полезно и не скучно. Спасибо за труд!!
Отличные уроки! Сначала думал очередной треш обрывками, а тут детально с нуля, доступно и не нудно. Хочется смотреть и смотреть, а то в других видео засыпаю через 5 минут после монотонности. Подписался на канал. Очень рад! Спасибо!
Как всегда на высоте! Спасибо большое!
Пожалуйста!
Спасибо за видео, очень полезно! Сам как-то делал свою реализацию модальных окон. Хотел рассказать с какими проблемами я столкнулся (ведь нет предела совершенству :)
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 а ты решил баг с табом?
Очень вовремя, в принципе как всегда) Спасибо большое!
Пожалуйста!
Смотрел много разных видео эти уроки одни из лучших просто и понятно и съемка хорошая так держать. Спасибо!
Огромное тебе спасибо друг за все что ты делал и делаешь для людей. Ты лучший!!!
Жека, у тебя самый лучший канал! Всё очень круто рассказываешь и показываешь, а главное - ты такой жизнерадостный и это вдохновляет! Спасибо!
Ничего себе как всё заморожено!!! Гениально. Спасибо за подробные объяснения!!! Всё круто!!!
Как всегда, все чётко и красиво подано.. Я вообще чел ленивый на комменты, но после просмотра, не могу не отметиться. ПОПАПЫ, ВСЕМ ПОПАПАМ - ПОПАПЫ !!!
Спасибо!
Спасибо за простые и доступные уроки. Ты настоящий герой!
Спасибо за новый урок, как всегда круто, понятно и коротко 10 из 10))
Женя, твой канал это кладезь знаний! спасибо)
Очень понятно и толково! Спасибо тебе за работу, продолжай в том же духе! Ещё меся назад казалось всё это страшным сном, а сейчас уже сам делаю лендинги и даже с попАпами)) Всё твоя заслуга, спасибо, бро!
Я рад!
Спасибо большое за вашу работу! Отличная подача материала!
Невероятно крутые уроки! Спасибо!
Пожалуйста!
Лучший!
Спасибо тебе за твою работу!!!
Пожалуйста!
Спасибо большое! Крутяк, как обычно !!!
Пожалуйста!
Спасибо большое за простое и понятное видео! Целый день пыталась сделать модальное окно без JS, когда доделала - нашла этот материал. Оказывается можно было не мучиться!
Годнота подъехала! Палец вверх 👍
Спасибо!
Круто, это лучший канал по вёрстке! Продолжай в том же духе!
Спасибо!
@@FreelancerLifeStyle как бы завистники не стали с вами бороться)
Согласен
@@dinir1000 Что? Зачем? 🤦
Как всегда топчик!) Сложно, но интересно)
Спасибо!
Легко и непринуждённо! Блестящий ролик!
Топ, как раз искал как сделать попап окна. И тут твое видео )
Я рад!
Парень, ну ты прям очень крутой. Спасибо тебе огромнейшее за то, что делишься своими знаниями!!!!!!!!!!!!!
Круто! Спасибо, очень интересно и познавательно
Я рад!
Как всегда супер!
Спасибо!
Как всегда отлично! Спасибо, что на чистом JS
Словами не передать, как Вы помогли )
Я вас смотрел еще когда у меня не было работы, а теперь я работаю и применяю ваши знания на практике
Господи, это лучший канал по верстке. Спасибо тебе огромное!!!
Пожалуйста!
Женя, спасибо большое за видос!
Пожалуйста!
Женя, спасибо!
Пожалуйста!
Годно! Спасибо большое!
Пожалуйста!
Як завжди ВОГОНЬ!!! З нетерпінням чекаю нове відео.
Дякую
Жека. Покажи як зробити слік слайдер в табах.
Отличное видео, теперь я научился делать модальные окна, однозначно лайк!
Спасибо за урок, очень полезно!
Спасибо большой
Больше видео по нативным JS
Спасибо!
очень элегантное решение со скролом бади, очень внятное и понятное объяснение, спасибо!
Очень круто доносишь информацию!
Спасибо!
Ну что ж погнали!!! Спасибо ЖЕКА ТЫ ЛУЧШИЙ :)!!!!
очень круто все показываешь, спасибо!
Отличное видео, спасибо за подробную инструкцию! :)
Пожалуйста!
Огромнейший респект!
Супер! спасибо за разные варианты)
Топчик, спасибо)
Побольше JS для развития молодежи)))🤤
Будут уроки
Лайк, просил в комментах эту тему, Евгений, вот за это спасибо, респект)
Здравствуйте! Благодарю за видео!
Это гениально!!! Попап без дж это круто))))
пожалуйста!
Спасибо большое, ваш урок мне очень помог.
Я рад!
Дружище, просто лучший
Зачетные видео!!!
Спасибо!
Большое спасибо за урок!
Сейчас прохожу платный курс по фронтенд-разработке. Был приятно удивлен, когда это видео порекомендовал один из наставников, и сказал что в свое время оно ему очень помогло.
Жека, тебе огромная благодарность за твой труд, просто лучший!!!
Как говорится тренер тренеров, the best of the best! 💪🔥
Женя, ты пушка гонка !!!
Круто показываешь, объясняешь.
Продолжай так-же 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
ОФИГЕННЫЙ урок Жека
Женя , спасибо за твою отзывчивость) . Мы просим , ты тут же выпускаешь нужный видосик. Самый-самый канал с обратной связью))
Пожалуйста!
Крутейший профессионал своего дела 👍
спасибо, очень кстати! 🤜🤛
Пожалуйста!
Шикарно. Спасибо большое.
Очень уважаю тех, кто заморачивается на мелочах, которые для других не критичны.
Пожалуйста!
Такой радостный, когда видишь готовый результат)
я подписуш тебе а ты мне пж
Шапочка всегда вместе с нами. - услышал я, поправляя на голове шапочку из фольги...
Очень круто, спасибо!
Пожалуйста!
вот это проработка задачи. Век живи век учись :)
Спасибо!
Музыка в начале просто бомба. Сразу лайк
Большое спасибо за видео, как всегда очень вовремя, как раз нужно для работы) Еще хотелось бы видео про структуру файлов для многостраничного сайта, хотя бы кратко. Знаю что уже не раз просили тебя о таком, попрошу и я еще раз))
Что-то придумаю)
Попапы это круто! Кстати, часто встречаются в макетах звёздные рейтинги, можно было бы о них видос запилить. Это так, если тебе понравится идея. Видос как всегда очень информативный и полезный!
Рейтинг обязательно будет!
Вот это Жека, ты заморочился!!!
Здорово! Комар носа не подточит! Очень подробно и аккуратно!
JS всегда можно улучшить, а так спасибо!
Красава, четко все по полочкам разложил. Отличное видео !
Спасибо!
Це напевно не реально вивчити, але треба пробувати. Дякую за вашу роботу!
Благодарю Вас за видео.
За одни только анимации в видосе лайк, какой кайф
Супер 👍🏻 ось це-то подача інформації... Дякую
Женя, ты очень крутой! Спасибо тебе большое!!!
идеально!!!
Дякую)
Спасибо! Смотрю твои уроки. Следующее большое дело буду оформлять в html. Ты делаешь крутую работу. Знай, что у тебя есть бесплатная юридическая консультация по любым вопросам.
Спасибо большое!
Это настолько круто, что просто взрыв мозга!
∞ лайков в карму.
Ты все делаешь креативно и профессионально. Ты крутой 👍 . Я все твои видео посмотрел.
Продолжай снимать пж
Спасибо!
@@FreelancerLifeStyle Рад что ответил. Ты мой самый лучший учитель.
Лайки
Молодец, будь здоров !
Вообще классное видео, даже скептически подойти, вы довольно быстрои лаконично все рассказали. Хотя живой код всегда лучше. :)
Огромное спасибо за видео
Большое спасибо, ваше видео помогло!
Я смотрел это видео в 2021 году. Очень круто!
A very detailed description of getting started with js
Спасибо большое!
Спасибо! Очень!
Спасибо!
Спасибо за видео. Вот только что с Вашей помощью сделал выдвигающуюся корзину с правой стороны) Выглядит очень классно)
Но, на счёт адресной строки, Вы правы, возможно придётся потом и js код перепечатать
Круто, спасибо!)
Пожалуйста!
ти просто красавчик ! тільки хотів гуглити як робити і тут твоє відео , супер
Я радий)
Классно разобрано про полосу прокрутки.
Может кому-то будет полезно:
Быстрый и аккуратный крестик можно получить из символа +, повернув его на 45 градусов через транзишн ротэйт.
Нод-лист удобнее перебирать циклом forEach, чем for. Не поленитесь разобраться с ним.
Вместо прослушивателя событий на каждую ссылку лучше сделать один прослушиватель на секцию или даже документ, а внутри него делегировать условиями на что именно и как срабатывать. Что-то подобное как тут в функции закрытия модалки при клике мимо окна. Прямо в том же прослушивателе можно для всех остальных кликов на странице прописать остальные условия. Смотрите тему делегирование.
Получить боди можно без квериселектора, просто document.body.
Ещё проще крестик сделать - это использовать спецсимвол. В after или before content : "\2716"
чувак, ты гений!