Модальные окна (попапы) на HTML CSS JavaScript. Всплывающие окна. Как это сделать?

Модальные окна, их еще называют всплывающие окна или попапы от английского (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
🤟 Живи, а работай в свободное время! ©

[@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

[@k-ivan]

Для фиксированных элементов лучше использовать margin(в таком случае элемент будет виден весь, в случае с padding 17px элемента будут обрезаны) Timeout для закрытия окна лучше получить с помощью window.getComputedStyle(в этом случае его не нужно хардкодить каждый раз при смене длительности в стилях) или можно использовать transitionend ивент, чтобы быть в курсе, что анимация закончилась и можно что-то сделать Вообщем для улучшений большое поле деятельности. Очень хорошо, что обращайте внимание на такие мелочи как скачки контента, не многие на это обращают внимание, к сожалению.

[@user-in1en4sl9y]

Евгений привет!, Круто как всегда! Сейчас прикину, как сделать ещё вариант, без js . Если не возражаешь, сюда скину!

[@FreelancerLifeStyle]

Спасибо! Прогоню все на практике

[@FreelancerLifeStyle]

Конечно, давай)

[@user-cp8fy7qm5l]

Есть один вариант.Продолжение курса фронтенд и видеоуроки по джаваскрипт

[@igork.3575]

просто лучший ! шикарный разбор конкретной задачи без лишней "воды"

[@grokhotun]

Лучший, Жека! Как раз во время урок! Начал верстать макеты с модалками и твое видео вышел!

[@FreelancerLifeStyle]

Супер, я рад!

[@SkySystems]

Отличные уроки! Сначала думал очередной треш обрывками, а тут детально с нуля, доступно и не нудно. Хочется смотреть и смотреть, а то в других видео засыпаю через 5 минут после монотонности. Подписался на канал. Очень рад! Спасибо!

[@AbraKadabra000]

Это самый лучший канал про веб-фронтенд разработку где видео выходят регулярно, не скучные и отличного качества!!

[@FreelancerLifeStyle]

Спасибо!

[@camdenhobby3940]

Спасибо. Все очень четко и без воды. Да и приятно смотреть без хрюканей и чая с плюшками,и паузами на котов. Однозначно лайк.

[@FreelancerLifeStyle]

Спасибо!

[@olehyefimenko6693]

Единственный канал на котором ставлю лайк еще до просмотра, потому что уверен, что урок сделан на высшем уровне! Жека, так держать!

[@FreelancerLifeStyle]

Спасибо!

[@viorelodajiu1238]

да да. я тоже жадный на лайки. на его канал нужно добавить еще несколько таких кнопок.

[@denyszhurbin9323]

Как всегда полезно и не скучно. Спасибо за труд!!

[@Andrei_Porsev]

Век живи век учись... Вроде я не первый год занимаюсь разработкой сайтов, но смотря твои уроки каждый раз нахожу для себя что-то новое. Довольно долго использовал Bootstrap, только лишь из-за его быстрых решений с теми же pop-up, готовой сеткой и прочими наработками и сквозь зубы мирился с кучей лишнего, что с ним подключалось. И только благодаря твоим понятным урокам и наработкам, я отказался от него и начал создавать свои заготовки. Спасибо за твой вклад!

[@FreelancerLifeStyle]

Я очень рад!

[@point111]

Зачем подключать весь бутстрап? На странице кастоматизации выбираешь только сетку и её респонз и генеришь сборку только с этим.

[@hooli7gan]

Очень вовремя, в принципе как всегда) Спасибо большое!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-bq5bx5rg3u]

Спасибо большое за простое и понятное видео! Целый день пыталась сделать модальное окно без JS, когда доделала - нашла этот материал. Оказывается можно было не мучиться!

[@Tiikiirus]

Как всегда на высоте! Спасибо большое!

[@FreelancerLifeStyle]

Пожалуйста!

[@mmosow]

Огромное тебе спасибо друг за все что ты делал и делаешь для людей. Ты лучший!!!

[@wireinet]

Ничего себе как всё заморожено!!! Гениально. Спасибо за подробные объяснения!!! Всё круто!!!

[@user-zo7nc9on7j]

Смотрел много разных видео эти уроки одни из лучших просто и понятно и съемка хорошая так держать. Спасибо!

[@zordig]

Спасибо за новый урок, как всегда круто, понятно и коротко 10 из 10))

[@alexzk8338]

Очень понятно и толково! Спасибо тебе за работу, продолжай в том же духе! Ещё меся назад казалось всё это страшным сном, а сейчас уже сам делаю лендинги и даже с попАпами)) Всё твоя заслуга, спасибо, бро!

[@FreelancerLifeStyle]

Я рад!

[@olgam414]

Спасибо большое за вашу работу! Отличная подача материала!

[@user-jq6tr6rr8v]

Спасибо большое! Крутяк, как обычно !!!

[@FreelancerLifeStyle]

Пожалуйста!

[@cryfos]

Жека, у тебя самый лучший канал! Всё очень круто рассказываешь и показываешь, а главное - ты такой жизнерадостный и это вдохновляет! Спасибо!

[@user-pz7xn4sl8i]

Лучший! Спасибо тебе за твою работу!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@Faradau]

Спасибо за видео, очень полезно! Сам как-то делал свою реализацию модальных окон. Хотел рассказать с какими проблемами я столкнулся (ведь нет предела совершенству :) 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]

Конечно работы еще хватает, но начало положено, спасибо!

[@ROVbeard]

@@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, а ссылка - это всё таки переход.

[@ROVbeard]

"1. Нажмите курсором в окне и проведите не отпуская до фона окна и отпустите" - лечится заменой 'click' на 'mousedown' , но я люблю делать нажатие на mouseup, так что клик в "молоко" делаю отдельно.

[@Vladyslav_Sliusar]

Решил вторую проблему?)

[@Vladyslav_Sliusar]

@@ROVbeard а ты решил баг с табом?

[@user-mz3sc7tv2o]

Спасибо за простые и доступные уроки. Ты настоящий герой!

[@MarcoPolo11111]

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

[@antDgt]

Круто! Спасибо, очень интересно и познавательно

[@FreelancerLifeStyle]

Я рад!

[@Hrusst]

Как всегда, все чётко и красиво подано.. Я вообще чел ленивый на комменты, но после просмотра, не могу не отметиться. ПОПАПЫ, ВСЕМ ПОПАПАМ - ПОПАПЫ !!!

[@FreelancerLifeStyle]

Спасибо!

[@lydiamarz4084]

Как всегда отлично! Спасибо, что на чистом JS

[@AzamatKabiden]

Топ, как раз искал как сделать попап окна. И тут твое видео )

[@FreelancerLifeStyle]

Я рад!

[@bc.export5542]

Легко и непринуждённо! Блестящий ролик!

[@user-cs2nu7ob7n]

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

[@ye5275]

Невероятно крутые уроки! Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@MaximVernigorov]

Ну что ж погнали!!! Спасибо ЖЕКА ТЫ ЛУЧШИЙ :)!!!!

[@user-xw1wy8ci8z]

Женя, твой канал это кладезь знаний! спасибо)

[@user-vk1kb3xj6b]

Годнота подъехала! Палец вверх 👍

[@FreelancerLifeStyle]

Спасибо!

[@bessonov7897]

Господи, это лучший канал по верстке. Спасибо тебе огромное!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@skilful221]

Как всегда топчик!) Сложно, но интересно)

[@FreelancerLifeStyle]

Спасибо!

[@romanchagovtsev4119]

Как всегда супер!

[@FreelancerLifeStyle]

Спасибо!

[@user-mo6xq8jq7m]

Женя, спасибо большое за видос!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-du6ns4ww6o]

Я вас смотрел еще когда у меня не было работы, а теперь я работаю и применяю ваши знания на практике

[@seriousman109]

Словами не передать, как Вы помогли )

[@dinir1000]

Лайк, просил в комментах эту тему, Евгений, вот за это спасибо, респект)

[@sergeyrepko3042]

очень круто все показываешь, спасибо!

[@Zarmarinas]

Супер! спасибо за разные варианты)

[@bublik8961]

Спасибо за урок, очень полезно!

[@notxdsakarsakarxnvtxdskxarxdsk]

Годно! Спасибо большое!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-jn5cb4zb7f]

очень элегантное решение со скролом бади, очень внятное и понятное объяснение, спасибо!

[@aleksanderr4673]

Очень круто доносишь информацию!

[@FreelancerLifeStyle]

Спасибо!

[@user-dj4gq6dl7q]

Сейчас прохожу платный курс по фронтенд-разработке. Был приятно удивлен, когда это видео порекомендовал один из наставников, и сказал что в свое время оно ему очень помогло. Жека, тебе огромная благодарность за твой труд, просто лучший!!! Как говорится тренер тренеров, the best of the best! 💪🔥

[@zhekachu1867]

Круто, это лучший канал по вёрстке! Продолжай в том же духе!

[@FreelancerLifeStyle]

Спасибо!

[@dinir1000]

@@FreelancerLifeStyle как бы завистники не стали с вами бороться)

[@ruslanegamoff5393]

Согласен

[@drknss3021]

@@dinir1000 Что? Зачем? 🤦

[@user-nb8ex1tq6r]

Отличное видео, спасибо за подробную инструкцию! :)

[@FreelancerLifeStyle]

Пожалуйста!

[@user-jf4cz7fu5p]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@alignright]

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

[@FreelancerLifeStyle]

Я рад!

[@bessonniy9208]

Огромнейший респект!

[@user-te1ut5ev8w]

Здравствуйте! Благодарю за видео!

[@haskvel]

Як завжди ВОГОНЬ!!! З нетерпінням чекаю нове відео.

[@FreelancerLifeStyle]

Дякую

[@haskvel]

Жека. Покажи як зробити слік слайдер в табах.

[@DenisrcekgDenisrcekg]

Крутейший профессионал своего дела 👍

[@eev9enn578]

Женя, ты пушка гонка !!! Круто показываешь, объясняешь. Продолжай так-же 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀

[@annagrigorewa]

Женя, спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@alexmart6968]

ОФИГЕННЫЙ урок Жека

[@user-bv6dv6jd4f]

Дружище, просто лучший

[@nefed-L]

Большое спасибо за урок!

[@madambatagoff6216]

Це напевно не реально вивчити, але треба пробувати. Дякую за вашу роботу!

[@dismoral7672]

Такой радостный, когда видишь готовый результат)

[@onetwo_official_2023]

я подписуш тебе а ты мне пж

[@sokratvideo666]

Это настолько круто, что просто взрыв мозга! ∞ лайков в карму.

[@vm_lucky]

Зачетные видео!!!

[@FreelancerLifeStyle]

Спасибо!

[@user-tb6ss2el3y]

Спасибо большой Больше видео по нативным JS

[@FreelancerLifeStyle]

Спасибо!

[@Ironcow_ua]

Топчик, спасибо) Побольше JS для развития молодежи)))🤤

[@FreelancerLifeStyle]

Будут уроки

[@user-rt5br3mw9j]

Музыка в начале просто бомба. Сразу лайк

[@AbraKadabra000]

Чтобы скрыть попап, не нужно дополнительно писать id=header для display-fixed элемента. Достаточно в ссылке написать href="##" этот якорь не приведёт к скроллу к началу страницы

[@FreelancerLifeStyle]

Круть спасибо!

[@user-zo7nc9on7j]

Да круть спасибо а просто задал левый класс. но этот способ быстрее.

[@miraigrafit7865]

Только валидатор будет в шоке)

[@golder6354]

Ребят! В топ его!

[@pashasergiychuk8854]

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

[@no_name_2mix]

Очень круто, спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@vitamax3777]

спасибо, очень кстати! 🤜🤛

[@FreelancerLifeStyle]

Пожалуйста!

[@yusif4183]

Красава, четко все по полочкам разложил. Отличное видео !

[@FreelancerLifeStyle]

Спасибо!

[@ricogyrchik9955]

За одни только анимации в видосе лайк, какой кайф

[@user-wf4np1ne2c]

Это гениально!!! Попап без дж это круто))))

[@FreelancerLifeStyle]

пожалуйста!

[@nikolay_it_master]

вот это проработка задачи. Век живи век учись :)

[@FreelancerLifeStyle]

Спасибо!

[@user-pn2ev2je2l]

Благодарю Вас за видео.

[@user-ri1ry7sx6p]

Женя , спасибо за твою отзывчивость) . Мы просим , ты тут же выпускаешь нужный видосик. Самый-самый канал с обратной связью))

[@FreelancerLifeStyle]

Пожалуйста!

[@olehpastovenskyi6441]

Супер 👍🏻 ось це-то подача інформації... Дякую

[@user-iq5wx7qq4v]

Женя, ты очень крутой! Спасибо тебе большое!!!

[@blog_travelling]

Большое спасибо, ваше видео помогло!

[@maximshevchenko6202]

Вообще классное видео, даже скептически подойти, вы довольно быстрои лаконично все рассказали. Хотя живой код всегда лучше. :)

[@it-learner5701]

Я смотрел это видео в 2021 году. Очень круто!

[@yuliavyssotskaya1269]

Здорово! Комар носа не подточит! Очень подробно и аккуратно!

[@FreelancerLifeStyle]

JS всегда можно улучшить, а так спасибо!

[@user-fy3jo6nj3b]

Вот это Жека, ты заморочился!!!

[@const6185]

A very detailed description of getting started with js

[@chudotech]

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

[@user-wv4cz4ls4l]

Огромное спасибо за видео

[@marattoktosunov8994]

Молодец, будь здоров !

[@den15t1]

Спасибо! Смотрю твои уроки. Следующее большое дело буду оформлять в html. Ты делаешь крутую работу. Знай, что у тебя есть бесплатная юридическая консультация по любым вопросам.

[@FreelancerLifeStyle]

Спасибо большое!

[@plowman5260]

Спасибо огромное, но чтобы на js работало, пришлось несколько раз с нуля попереписывать, побеситься что не работает, но в итоге всё работает и я так рад :)

[@Sobanim]

Спасибо за видео. Вот только что с Вашей помощью сделал выдвигающуюся корзину с правой стороны) Выглядит очень классно) Но, на счёт адресной строки, Вы правы, возможно придётся потом и js код перепечатать

[@rastyboss6584]

ти просто красавчик ! тільки хотів гуглити як робити і тут твоє відео , супер

[@FreelancerLifeStyle]

Я радий)

[@ruslanegamoff5393]

Ты все делаешь креативно и профессионально. Ты крутой 👍 . Я все твои видео посмотрел.

[@ruslanegamoff5393]

Продолжай снимать пж

[@FreelancerLifeStyle]

Спасибо!

[@ruslanegamoff5393]

@@FreelancerLifeStyle Рад что ответил. Ты мой самый лучший учитель.

[@ruslanegamoff5393]

Лайки

[@user-qz6sd7px7h]

идеально!!!

[@FreelancerLifeStyle]

Дякую)

[@SuleimanVatrushkin]

Круто, спасибо!)

[@FreelancerLifeStyle]

Пожалуйста!

[@zmeygorynych5684]

Отличный видос, помогло, сверстал картинки в макете binary с помощью модальных окон)

[@QwiniTRON]

Просто попал на лайк!

[@FreelancerLifeStyle]

Спасибо!

[@user-nb3rx2cg4j]

Спасибо! Очень!

[@FreelancerLifeStyle]

Спасибо!

[@ihorlevit5369]

Спасибо за это видео, мне в работе оно уже не однократно пригодилось

[@FreelancerLifeStyle]

Отлично!

[@FozGenKo]

Шапочка всегда вместе с нами. - услышал я, поправляя на голове шапочку из фольги...