Простое модальное окно (Popup окно)

  Рет қаралды 32,972

Александр Дудукало

Александр Дудукало

Күн бұрын

Пікірлер: 236
@aliakseipliutsinski2890
@aliakseipliutsinski2890 Жыл бұрын
Вы выдающийся человек, ещё никто так понятно для меня не мог объяснить как делать модальные окна! Огромное вам спасибо, любви, удачи, и всего самого наилучшего!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Большое спасибо Вам за такие теплые слова ☺ безумно приятно читать такой комментарий 🙈 надеюсь и другие видео помогут Вам в изучении))
@ИльяАнтюхов
@ИльяАнтюхов 4 ай бұрын
когда просмотришь сотню видосов пазл складывается))
@talkhinr
@talkhinr 5 ай бұрын
Спасибо за такое подробное объяснение, без ваших видео не понял бы и половины того что сейчас знаю о JS
@nikitadanilovspb
@nikitadanilovspb 8 ай бұрын
Начал делать курсовой проект по базовому JS от Skillbox, Александр, без вас я бы сюда не добрался. Спасибо и обязательно продолжайте то, что делаете!
@ВладимирКлиш
@ВладимирКлиш 8 ай бұрын
Спасибо огрмоное за Вашу работу!!! Обясняете просто на высшем уровне, все просто понятно и доступно.
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Большое спасибо :) Это очень приятно )
@ИринаНесмеянова-н8й
@ИринаНесмеянова-н8й Жыл бұрын
пишу для поддержки канала. Большое вам спасибо за ваши труды
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Большое спасибо за вашу постоянную поддержку ) Комментарии, которые вы оставляете вдохновляют меня снимать такие ролики ) Вы лучшие
@ВикторияСупрун-ы1ы
@ВикторияСупрун-ы1ы Жыл бұрын
Александр, еще раз выражаю Вам свою огромную благодарность. Ошибку я уже нашла (пропустила точку) и теперь все отлично работает.
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ваш комментарий😊 рад, что у вас получилось исправить ошибку 🤗 надеюсь и другие видео курса будут вам полезны))
@СтаниславГорячев-г1ъ
@СтаниславГорячев-г1ъ Жыл бұрын
11:35 опАсити )
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо ))) Буду говорить правильно
@Knack2018
@Knack2018 Жыл бұрын
Отличное видео, объяснение куда точнее, чем у наставников ЯндексПрактикума. Ты молодец, продолжаю учиться благодаря таким видео))
@thegamers4405
@thegamers4405 Жыл бұрын
Oгромное спасибо за видео, всё просто и понятно(почти), до этого 3-4 видоса смотрел и вообще ничего не понял и ничего работало, но после ВАШЕГО всё заработало, спасибо. Однозначно лайк и подписка👍
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Большое спасибо, что поделились вашим мнением. Ролик получился долгим, но я старался ничего не упустить ))
@АлексейВодяницкий-ь1ы
@АлексейВодяницкий-ь1ы Жыл бұрын
Александр, потрясающее видео!!! Показываете с разъяснениями, с живым примером!!! Всё сразу становится понятным😎 с нетерпением буду ждать подобные видео👏👏👏
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ваш крутой отзыв :) не всегда получается быстро отвечать)) но я стараюсь 😇
@РонКасторкин
@РонКасторкин Жыл бұрын
Александр, спасибо!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам взаимно :)
@tabrisel
@tabrisel Жыл бұрын
"Классно? Или не классно?! Мне классно, мне нравится)))" :D Спасибо вам за урок)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо 😀 надеюсь и при просмотре других видео курса, вам будет классно 😎
@angelochech
@angelochech Жыл бұрын
Спасибо вам огромное. Всё очень понятно объясняете. Много раз спасали ваши видео. 👏
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ваш важный и приятный отклик )
@timkri0
@timkri0 Жыл бұрын
Александр , спасибо за крутое видео ! В этом году Вы набрали высокий темп по выпуску видео, надеюсь весь год будет такой же продуктивный !
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам :) Да, за месяц довольно много сделал роликов :) Надеюсь так и будет продолжаться. Это прибавляет к росту канала :)
@nemercevroman
@nemercevroman Жыл бұрын
спасибо большое, теперь всё кажется понятным и доступным. Рад что подписался на ваш канал!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам. А я рад вашему участию и подписке :) Оставайтесь на канале ))
@СтаниславГорячев-г1ъ
@СтаниславГорячев-г1ъ Жыл бұрын
вы очень классный преподаватель, жаль, что вас раньше не было, над многими вещами не пришлось бы много времени сидеть)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ваши слова. Для меня они очень важны )
@andreypavlukov1192
@andreypavlukov1192 Жыл бұрын
Очень полезно, берём на вооружение!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Думаю где то пригодится :)
@OlgaTas-bp9jg
@OlgaTas-bp9jg Жыл бұрын
это лучшее видео из тех, что я просмотрела. Все просто и понятно. Благодарю! Подписываюсь!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за подписку и комментарий 🤗 ваша поддержка очень важна!)) надеюсь и другие видео канала будут вам полезны))
@pelepele123
@pelepele123 Жыл бұрын
Отличное видео. Всё подробно, все ясно. Без лишней воды!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам, Очень рад, что ролик вам понравился :)
@ivanmochalov7129
@ivanmochalov7129 Жыл бұрын
Очень классные видео! Но хотелось бы увидеть от вас видео про деструктуризацию в js :)
@IT-Svyatoslav
@IT-Svyatoslav Жыл бұрын
Благодарю Александр 😃 у тебя Отлично получается 👏. Грид - супер!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Большое спасибо )) Буду работать над материалом по теме гридов :)
@ваняглухов-ц4в
@ваняглухов-ц4в Жыл бұрын
спасибо за урок,очень понравилось.Задаю классы дивам русскими буквами,айди по началу тоже начал русскими,естественно джава не читала кириллицу,минут 10 тупил потом дошло))
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам, да классы лучше писать на латинице. Так же и id :)
@ваняглухов-ц4в
@ваняглухов-ц4в Жыл бұрын
@@alex_dudukalo не подскажите почему нужно классы на латинице называть?
@alex_dudukalo
@alex_dudukalo Жыл бұрын
@@ваняглухов-ц4в сайт должен запускаться везде во всем мире. Плюс изначально программы и верстка пишутся на латинице :)
@ваняглухов-ц4в
@ваняглухов-ц4в Жыл бұрын
@@alex_dudukalo Понял.Спасибо ещё раз за урок,все предельно понятно и ясно. До этого смотрел другой,там метод был в разы хуже,что-то скачивать,ещё у всех неработало,а тут простой код и все действует + узнал команды которые в дальнейшем смогу использовать в других задачах
@Зануда-ю7н
@Зануда-ю7н Жыл бұрын
Хорошая анимация, внесу изменения в свои работы) будет красота) Благодарю за видео 👍
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вас. Здорово, что вы захотели применить это в своей работе. Надеюсь это ее украсит :)
@relaxdeepsleepmusic3608
@relaxdeepsleepmusic3608 Жыл бұрын
Вы отличный преподаватель 👍
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Очень очень приятно :)Спасибо вам
@stanislavosipkin
@stanislavosipkin Жыл бұрын
Видео оказалось очень полезным, спасибо!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам за отзыв) Рад, что смог рассказать что то интересное
@studenttusur6059
@studenttusur6059 Жыл бұрын
Очень интересная подача у автора, спасибо контент)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Большое спасибо за ваш приятный отзыв :)
@ЕвгенияЛошакова-т8к
@ЕвгенияЛошакова-т8к 7 ай бұрын
Классное видео, спасибо большое! Наверное хотелось бы чуть больше про js часть послушать
@aliquamsiderea
@aliquamsiderea Жыл бұрын
Огромнейшая благодарность!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Благодарен вам за ваш отзыа )
@ShTyrM.
@ShTyrM. 6 ай бұрын
все прекрасно! Но есть один нюанс, что нельзя использовать для нескольких объектов, в моем случае несколько карточек, открывается только 1-ая, остальные 6 не работаеют, пока не уберу у первого, но потом работает только 2
@АндрейБерезовский-е1ь
@АндрейБерезовский-е1ь Жыл бұрын
👍👍👍Спасибо большое!!! Все отлично объяснили!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам :) Рад, что смог помочь и объяснить :)
@ArtemGolovchansky
@ArtemGolovchansky Жыл бұрын
Всё получилось. Отличный урок.
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Очень рад, что ролик был полезным :) Спасибо
@alexeyxolosha149
@alexeyxolosha149 3 ай бұрын
Спасибо большое!
@alex_dudukalo
@alex_dudukalo 3 ай бұрын
Спасибо вам :)
@nickp5183
@nickp5183 Жыл бұрын
Интересно, спасибо!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
И вам :)
@Akimimemakurera
@Akimimemakurera 7 ай бұрын
Многие зададутся вопросом, как реализовать несколько popup, это 100% делюсь решением этого вопроса: // Функция для открытия модального окна function openModal(modalId) { document.getElementById(modalId).classList.add("open"); } // Функция для закрытия модального окна function closeModal(modalId) { document.getElementById(modalId).classList.remove("open"); } // Обработчики событий для кнопок открытия модальных окон document.getElementById("open-popup-btn_ksen").addEventListener("click", function() { openModal("popup_ksen"); }); document.getElementById("open-popup-btn_another").addEventListener("click", function() { openModal("popup_another"); }); // Обработчики событий для кнопок закрытия модальных окон document.getElementById("close-popup-btn_ksen").addEventListener("click", function() { closeModal("popup_ksen"); }); document.getElementById("close-popup-btn_another").addEventListener("click", function() { closeModal("popup_another"); }); // Закрытие модального окна при клике вне его document.querySelectorAll(".popup").forEach(function(popup) { popup.querySelector(".popup__box").addEventListener("click", function(event) { event._isClickWithInModal = true; }); popup.addEventListener("click", function(event) { if (!event._isClickWithInModal) { closeModal(event.currentTarget.id); } }); });
@arseniyklimovich8409
@arseniyklimovich8409 Жыл бұрын
Очень классное видео, помог впомнить и стили, и js, и открыть новые знания!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ваш отзыв 🤗 надеюсь и другие видео на канале будут вам полезны
@виталийбельдий-в1ц
@виталийбельдий-в1ц Жыл бұрын
так пишу от чувства благодарности) я пишу сейчас реальный сайт, и мне реально очень полезный ваш канал😊очень мне помогает, если я чего-то не знаю и думаю кого посмотреть то выбираю всегда вас, потому что подача инфи очень качественная)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Ещё раз спасибо за поддержку 🤗
@АлександрСитников-ы7я
@АлександрСитников-ы7я Жыл бұрын
Видео супер. Очень полезный контент для начинающих и не только. Желаю процветания вашему каналу. Ну и успехов🎉🎉🎉
@alex_dudukalo
@alex_dudukalo Жыл бұрын
большое спасибо за такой приятный и важный комментарий )
@giminyd3146
@giminyd3146 8 ай бұрын
Очень круто, спасибо!! Приятно слушать и поглощать информацию))
@makeuppolina
@makeuppolina Жыл бұрын
Спасибо большое за видео. Все очень понятно. Модальные окна больше не пугают))
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам. Думаю еще один ролик подобный запишу, что бы закрепить )
@russoturisto2617
@russoturisto2617 Жыл бұрын
Для чайников. Научите пожалуйсто как правильно сделать форму регистрации на сайте в виде модального окна что бы после регистрации оно скрывалась, в ваших роликах всё очень понятно и классно
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за предложение. Думаю это хорошее предложение для одного из вебинаров на канале :) Давно думал о такой форме :)
@НикитаСмирнов-ъ2п
@НикитаСмирнов-ъ2п Жыл бұрын
Спасибо большое за отличное видео, хорошую подачу материала и за практический пример))))) Очень круто!!!!!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Благодарен вам за ваш комментарий :) Спасибо за поддержку, это очень приятно. Хочется отвечать быстрее, но не всегда получается :(
@НикитаСмирнов-ъ2п
@НикитаСмирнов-ъ2п Жыл бұрын
@@alex_dudukalo даже не переживайте, у Вас много подписчиков и видео, конечно на это потребуется много времени на ответы в комментариях)))))) успехов Вам в развитии канала)))
@alex_dudukalo
@alex_dudukalo Жыл бұрын
@@НикитаСмирнов-ъ2п Спасибо вам за понимание и за успех. Успеха нам всем ))
@alialiev4667
@alialiev4667 2 ай бұрын
Спасибо большое ❤
@alex_dudukalo
@alex_dudukalo 2 ай бұрын
Спасибо вам за комментарий :)
@alex_dudukalo
@alex_dudukalo 2 ай бұрын
Спасибо вам за комментарий :)
@orthodox-chanel
@orthodox-chanel Жыл бұрын
а можно использовать модальное окно такого плана для отображения карточки товара? Например открылась карточка там что-то прописал отправил форму, запрос обработался на уровне бэкэнда но не обновляя основную страницу, закрыл окно и серфишь дальше сайт. Я просто питонист, мне еще надо много чего по бэкэнду прокачивать прежде чем перйду на js а такие функции хоть немного хочется использовать
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Здравствуйте, да конечно :) Там можно сделать. Но тут я рекомендую смотреть в сторону динамического создания таких окон. У меня есть видео. Посмотрите, возможно оно вам поможет. Но там, конечно нужен JS :) kzbin.info/www/bejne/l2eqcnZqftdsnJo
@952a259
@952a259 Жыл бұрын
Александр, большое спасибо за полезное видео!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ваш комментарий😊
@olegdp
@olegdp 8 ай бұрын
Благодарю. Просто, полезно и доходчиво.
@АнастасияУховцева
@АнастасияУховцева Жыл бұрын
в таком маленьком видео так много полезной информации спасибо)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ваш комментарий 😊 надеюсь и другие видео курса будут вам полезны
@АлексейСакович-п6б
@АлексейСакович-п6б Жыл бұрын
супер, как раз смогу в своей работе подправить модалку, а то она у меня совсем кривая
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Рад, что видео полезно даже для уже готовой работы)
@Blood-Saw
@Blood-Saw Жыл бұрын
Спасибо за подробное видео! Внёс корректировки в свой проект :)
@ПавелМуслаев
@ПавелМуслаев Жыл бұрын
ПРОСТО И ОЧЕНЬ КЛАССНО!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо 🔥 надеюсь и другие видео канала будут вам полезны))
@harryfloe
@harryfloe Жыл бұрын
а если несколько модальных окон? как не писать на каждое id и отдельный код?
@виталийбельдий-в1ц
@виталийбельдий-в1ц Жыл бұрын
я вижу ваш канал как коллекция реально практично полезной информации) которую я использую, так вот я очень был бы рад чтобы ваш канал и был такой коллекцией, где будет много всего полезного для реального использования 😎 потом очень надеюсь что и дальше будет много полезного для веб разработки, p.s вот и идея для нового контента)🥰 сделайте из своего канала лучшую библиотеку знаний для разработчиков)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо большое за комментарий 🤗 надеюсь так и будет, приятно, что канал вам полезен 😊
@Pluto3232
@Pluto3232 10 ай бұрын
Спасибо, очень интересно.
@alex_dudukalo
@alex_dudukalo 10 ай бұрын
Большое спасибо. Я рад, что вам понравилось это видео :)
@AnnaS-v3x
@AnnaS-v3x 9 ай бұрын
Оставляю здесь комментарий, чтобы как можно больше человек, перед которыми стоит задача с модальным окном, могли это посмотреть. Спасибо ❤
@skomggj2437
@skomggj2437 Жыл бұрын
просто лучший ,слов нет
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Большое спасибо :)))
@ЭльдарРафиев-й7п
@ЭльдарРафиев-й7п 6 ай бұрын
Спасибо, понятно и информативно)
@alex_dudukalo
@alex_dudukalo 6 ай бұрын
Спасибо за ваш комментарий :)
@megabulk
@megabulk Жыл бұрын
Круто!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо :)
@АртемМакаров-э8е
@АртемМакаров-э8е Ай бұрын
Гений нашего времени
@alex_dudukalo
@alex_dudukalo Ай бұрын
)))) Спасибо
@andreyfedyukin8360
@andreyfedyukin8360 Жыл бұрын
Спасибо 👍
@alex_dudukalo
@alex_dudukalo Жыл бұрын
И вам :)
@andreyfedyukin8360
@andreyfedyukin8360 Жыл бұрын
@@alex_dudukalo Применил Ваш метод в своей работе)) Надеюсь Вы не будете против 😊
@ДмитрийХимич-б6й
@ДмитрийХимич-б6й 9 ай бұрын
Спасибо тебе огромное!!!! Мне очень помогло твое видео
@СтаниславГорячев-г1ъ
@СтаниславГорячев-г1ъ Жыл бұрын
Спасибо)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам )
@ruslanlepekhin8777
@ruslanlepekhin8777 Жыл бұрын
Очень крутое видео. Спасибо за ваш труд. Подскажите, как добавить класс open по таймеру, а не клику?
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Здравствуйте, спасибо за ваш комментарий :) Можно сделать так: setTimeout(function(){ document.getElementById("my-modal").classList.add("open") },1000)
@elld1m
@elld1m Жыл бұрын
Благодарю. 🥰
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ваш комментарий 😇
@АлександрОсипов-ю6к
@АлександрОсипов-ю6к Жыл бұрын
Бро запиши роклик, что из JS надо знать начинающему верстальщику
@aleksanderm1947
@aleksanderm1947 Жыл бұрын
Самое главное, что нужно знать - нет уже такой профессии.)
@virnus1
@virnus1 Жыл бұрын
Опоздал лет на 20.
@worm8415
@worm8415 Жыл бұрын
Подскажите пожалуйста, делал по видео, где-то упустил. При открытии страницы окно сразу открыто, как исправить
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Здравствуйте, прошу прощения за долгий ответ. Хочется отвечать быстрее, но не всегда получается. Кажется уже не актуально, но все же отвечу& Думаю, вам следует убрать класс открытия модального окна из hmtl. Скорее всего он там есть :)
@fawn9035
@fawn9035 Жыл бұрын
Спасибо большое за ролик. Очень помогло в создание дипломки, только не могу понять как подвязать это окно к нескольким кнопкам?
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам за ваш комментарий. Да, тут уже интереснее. Два варианта. Привязывать одно модальное окно к каждой кнопке. Это можно сделать циклом (если знакомы с программированием на JS) или по очереди к каждой кнопке. Или можно создать разные модальные окна и к каждому создавать уникальный код JS.
@artemsergeev4833
@artemsergeev4833 Жыл бұрын
Всё понятно и оказывается просто сделать модалку. Будет желание, прошу, разбери пагинацию, когда данные приходят с сервера, с многоточием с права и слева. Спасибо!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам :) Да, ставлю в список и план) Буду показывать пагинацию ) Скоро
@H0TTAB
@H0TTAB Жыл бұрын
Александр, спасибо вам за урок! У меня получилось сделать классное модальное окно :) Т.к. я пишу из "будущего", относительно даты выхода этого урока, мой отзыв может быть не совсем объективным, но всё же я напишу. Из серьёзных минусов: вы не до конца объяснили JS код, по большому счёту просто предложив зрителям бездумно скопировать его у вас. Я про то, что появилось после фразы "Ну, я тут без вас дописал код". Мне пришлось идти гуглить, чтобы найти объяснения того, как закрыть модальное окно при клике по его подложке. У вас это не объясняется. Минусы "по мелочи": - На мой взгляд, очень важно произносить английские термины правильно. У вас много ошибок было, увы. Вы и сами произносите неправильно, и зрители потом будут за вами повторять. - При просмотре урока у меня сложилось такое ощущение, будто бы у вас не было сценария (или он был очень обобщённым), и какие-то моменты вы просто на ходу придумывали и проговаривали. Я думаю, что будет лучше, если у вас будет чёткий сценарий, без лишней "импровизации". Но это моё личное мнение. В целом, урок полезый и толковый, своё дело он делает - ДО урока я не умел делать модальные окна, ПОСЛЕ урока - умею. Спасибо вам большое! P.S. Лайк поставил, подписался :)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Здравствуйте, Хоттаб. Прошу прощения за долгий ответ. Хочется отвечать быстрее, но не всегда получается. Тем более такой полезный комментарий. Спасибо за него. Да, вы правы. Изначально мой план был показать только верстку модального окна, а JS код уже бонусом, но кажется это была не совсем удачной идеей. Так, как интерес он тоже вызывает. По поводу терминов и иностранных слов так же соглашусь с вами. Я уже начал над этим работать и бью себе по рукам ))), когда говорю не правильно или забываю. Я рад, что видео дало ожидаемый результат и очень надеюсь, что оно было интересным и смотрелось лего. А замечания правда хорошие, забираю их в работу. Еще раз спасибо.
@H0TTAB
@H0TTAB Жыл бұрын
@@alex_dudukalo Александр, здравствуйте! Спасибо, что читаете комментарии :) Мне, как зрителю, очень приятно знать, что автору не всё равно на моё мнение. Я делал практический (тренировочный, т.к. пока только учусь) проект, суть которого заключалась в создании простого веб-приложения, которое позволяет по поисковому запросу искать картинки (через API сервиса Unsplash), и изначально, найденные фотографии выводятся плиткой, но я хотел добавить так же возможность открыть full-size версию фотки по клику на неё. Вот тут то и пригодилось ваше видео, реализовал эту функцию как раз через модальное окно. Так что ещё раз спасибо!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
@@H0TTAB Да, безусловно мнение зрителей для меня важно и приятно. Тем более у вас очень развернутые и правильные сообщения. Мне приятно, что вы откликнулись. И все по делу. Да, вообще этот пример с модальным окном можно применять практически везде. Возможно вам будет интересно решение с использованием библиотеки fancyapps.com/fancybox/ В ней так же есть динамическая загрузка. Обязательно рассмотрите :)
@vladimiriv77
@vladimiriv77 Жыл бұрын
👏👏👏 Спасибо!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
И вам :)
@oraz_mah
@oraz_mah Жыл бұрын
Круто, классно делаешь!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо 🔥 надеюсь и другие видео канала, будут вам полезны))
@МихаилФролин-й1н
@МихаилФролин-й1н Жыл бұрын
Классное, полезное видео. очень помогли
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ваш комментарий🤗 надеюсь и другие видео канала будут вам полезны 😊
@sane_didi
@sane_didi Жыл бұрын
а так все понятно спасибо!!!
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Большое спасибо. Я рад, что видео было понятным и надеюсь, помогло решить задачу с попап окном :)
@Neopolitanian
@Neopolitanian Жыл бұрын
Великолепно! 👍
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо 🤗
@unknown.6914
@unknown.6914 Жыл бұрын
полезный контент, спасибо
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо 😊 надеюсь и другие видео курса будут вам полезны
@unknown.6914
@unknown.6914 Жыл бұрын
Александр, конечно будут полезны и мне и многим другим. Большое спасибо вам за проделанную работу, главное помните все это имеет смысл.
@shefchuk5249
@shefchuk5249 7 ай бұрын
а как сделать модольное окно что бы вызывалось с разных кнопак ?
@jamjam3337
@jamjam3337 Жыл бұрын
👏👍
@bulik1384
@bulik1384 Жыл бұрын
а как сделать если у меня несколько кнопок и их количество не известно? у меня есть некие блоки в БД и их количество может изменятся, и в каждом таком блоке будет кнопка. Давать кнопке id не вариант же, потому что id должен быть уникальным. Я пробовал getElementsByClassName вместо поиска по id, но это не работает. Я не силен в JS, подскажите пожалуйста как решить
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Здравствуйте, можно использовать поиск по классу. Находим все элемента с классами и добавляем им событие клика. Все кнопки, которые должны открыть это окошко должны иметь такой класс :) document.querySelectorAll(".класс_кнопки").forEach(button=>{ button.addEventListener("click", function(){ // Тут код, откарывающий модальное окно }) })
@med_mikroskop
@med_mikroskop Жыл бұрын
@@alex_dudukalo Спасибо за видео и большое спасибо за комментарий
@fawn9035
@fawn9035 Жыл бұрын
@@alex_dudukalo почему-то не работает
@fawn9035
@fawn9035 Жыл бұрын
@@med_mikroskop а вас так код заработал?
@artemrepin1746
@artemrepin1746 Жыл бұрын
Видео просто огонь. А что нужно просписать к функциям чтобы например окно вылетало к каждой из 10 одинаковых кнопок, при текущем раскладе отрабатывает только первую?
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам за отзыв :) Думаю можно сделать привязку клика не по ID, а по классу:// showBtn - класс для клика document.querySelectorAll('.showBtn').forEach(element => { element.addEventListener('click', function() { // Показываем окно }) })
@bulik1384
@bulik1384 Жыл бұрын
@@alex_dudukalo спасибо!!!🥳
@СнежанаКуразеева
@СнежанаКуразеева Жыл бұрын
Спасибо большое!!!❤
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вам за ваш отзыв
@ОльгаРебикова-я1г
@ОльгаРебикова-я1г Жыл бұрын
спасибо за урок!!!!
@darkmatter2075
@darkmatter2075 5 ай бұрын
Подскажите пожалуйста, какой ИИ лучше всего использовать юному инженеру изучающему веб разработку?
@alex_dudukalo
@alex_dudukalo 5 ай бұрын
Думаю, чат GPT в данный момент будет лучшим вариантом :)
@radokat
@radokat Жыл бұрын
Александр, спасибо за ваш труд. Видео понятные, темы очень нужные. Подскажите, пожалуйста, в чем может быть причина того, что модальное окно не открывается с мобильного телефона? Кнопка не срабатывает. В мобильной версии браузера ПК всё Ок, но с если открываю сайт с телефона - глухо.
@radokat
@radokat Жыл бұрын
Убрала ховер кнопок в мобильной версии, всё заработало.
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Отлично. Рад, что у вас получилось решить проблему. В целом врятли я смог бы помощь без исходного. Ведь именно его нужно смотреть для поиска проблемы ))
@showrun4747
@showrun4747 Жыл бұрын
ваш комментарий людям сэкономил кучу сил и времени. спасибо@@radokat
@СтаниславГорячев-г1ъ
@СтаниславГорячев-г1ъ Жыл бұрын
23:47 я не очень понял что такое _isClickWithInModal, это переменная?
@tigrext20
@tigrext20 Жыл бұрын
Да, переменная.Там где это написано, можно было бы написать (event.) - означает, что если происходит клик внутри модального окна, то модальное окно не закрывается, если сделать клик снаружи, то закроется
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Ответили уже ниже :)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за ответ :)
@Elena.S.
@Elena.S. Жыл бұрын
С вами модальные окна в макете перестали пугать :)
@maksimknysh7952
@maksimknysh7952 9 ай бұрын
А почему при grid модальное окно не уходит за пределы html? а при flex уходит???
@brutal-lukism
@brutal-lukism 11 ай бұрын
Огромное спасибо!
@alex_dudukalo
@alex_dudukalo 11 ай бұрын
Спасибо за обратную связь 🤗 ваша поддержка очень важна ☺
@ВикторияСупрун-ы1ы
@ВикторияСупрун-ы1ы Жыл бұрын
Александр, Ваше видео - просто находка для меня. И коротко, и понятно. и с мелкими, но важными подробностями... Очень, Вам, благодарна за Ваш труд. Но... у меня, почему-то. не открывается модальное окно при нажатии на кнопку, которая находится в отдельном меню авторизации. Она реагирует на нажатие. но модалка появляется на долю секунды и то в уменьшенном виде. а полностью не открывается. Может подскажете. что нужно подправить?
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Здравствуйте, прошу прощения за долгий ответ. Да, я с удовольствием постараюсь вам помочь. Но для этого мне понадобятся исходники вашего кода. Вы можете отправить в дискорде: discord.gg/frontend , если это еще актуально. Не забудьте отметить меня в сообщении @dudukalo
@tigrext20
@tigrext20 Жыл бұрын
Отличное видео. Подскажите пожалуйста нужно ли для модального окна делать отдельную подгрузку стилей через js, чтобы не прогружать стили для модального окна при открытии сайта? Или это нужно делать в зависимости от кол-ва функционала/стилей в модальном окне (если мало всего, то не нужно, если много, то нужно грузить стили через js на сайт)? Как определить момент, в который нужно или не нужно? Хотелось бы от Вас видео по promise и promise.all JavaScript
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо вас ) Очень хороший вопрос. Конечно идеально, если вы скрипт создания модального окна поместите в отдельный модуль и будете загружать его вместе с стилями. Это лучший способ, помогающий рационально использовать ресурсы. Главное загрузить все ресурсы именно до момента, когда вы созданный элемент помещаете в DOM дерево. По промисам хочу записать ролик. Тема сложная. Хочу немного набраться опыта в записи роликов, что бы сделать максимально понятно :)
@tigrext20
@tigrext20 Жыл бұрын
@@alex_dudukalo Хотелось бы видео на эту тему. Как лучше всего подгружать модули и стили в нужный момент)
@showrun4747
@showrun4747 Жыл бұрын
это -даа. сам вчера с 17 попытки записал демо на 3 минуты: то тут пропустил, то тут лучше так, а тут непонятно иили не переведено. на 3 минуты ролик я убил весь день.@@alex_dudukalo
@ratmetall6664
@ratmetall6664 Жыл бұрын
Привет! Круто → не то слово:) супер круто!!! Главное как шаблон идеально → лепи дальше сам как умеешь! Вопрос! А как быть если в ряд 4 одинаковые кнопки // 4 окна со своим текстом и все по четыре? регулировать при помощи id ?? и писать 4 комплекта js :( Что то я попробовал и запутался:( Спасибо за ответ! 👌
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо. Самое быстрое и простое - создать копии элементов и кода с разным id . Но если есть опыт в программирование на JS, то есть другие пути решения)
@johnprivalov1062
@johnprivalov1062 10 ай бұрын
Благодарю 🤝
@виталийбельдий-в1ц
@виталийбельдий-в1ц Жыл бұрын
хочу вас мотивировать и дальше делать такие видео как (отправка письма на почту, фиксированные меню, простое модальное окно, и так далее😁😁😁💪
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за отзыв, ваша поддержка очень важна 🔥
@Просточеловек-э6ы
@Просточеловек-э6ы Жыл бұрын
Спасибо, работает)
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо за отзыв 😊
@Sat_Poisen
@Sat_Poisen Жыл бұрын
+ хорошо рассказываешь
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо ☺
@MykolaChernov-m8w
@MykolaChernov-m8w Жыл бұрын
Делать через visuality неправильно, ведь если есть кнопка или что-то подобное то потом она будет из пустого места нажиматься. Нужно по праивльному делать
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Здравствуйте, не уверен, что понял вас. Но если применять к блоку visibility: hidden, то кнопка внутри блока будет не кликабельной :)
@laitaichiks
@laitaichiks 3 ай бұрын
спасибо тебе большое
@HamOfficiaI
@HamOfficiaI Ай бұрын
spasibo bolshoe bratux
@alex_dudukalo
@alex_dudukalo Ай бұрын
Больше спасибо вам за комментарий 😇
@sergeykhmelnitsky5307
@sergeykhmelnitsky5307 Жыл бұрын
супер, спасибо)
@matveysusloparov2374
@matveysusloparov2374 Жыл бұрын
может быть у вас какой то Телеграм канал есть для удобства чтобы файлы скачать? а то в видео так и не сказали))
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Здравствуйте. Да, спасибо за вопрос, в описании к видео есть ссылки, дублирую: 👁‍🗨 Телеграм канал: t.me/frontend_du2 👁‍🗨 Discord сервер: discord.gg/wyskBGxFcX
@matveysusloparov2374
@matveysusloparov2374 Жыл бұрын
@@alex_dudukalo спасибо, да я просто смеюсь, в том плане что вы в видосе уже раза 3 повторяли)))
@alex_dudukalo
@alex_dudukalo Жыл бұрын
@@matveysusloparov2374 😀 да, кажется, что интеграции мало на бывает. Но и много тоже не стоит. Согласен. Кстати, в описании есть ссылка на телегам канал с исходникам кода 😀
@AngeliteBlair
@AngeliteBlair Жыл бұрын
круто
@alex_dudukalo
@alex_dudukalo Жыл бұрын
Спасибо! 😊
@x-diz
@x-diz 5 ай бұрын
А как в модальном окне открыть другой html файл? Типа
@alex_dudukalo
@alex_dudukalo 5 ай бұрын
Скорее всего вам понадобится для этого
@31-tv
@31-tv Жыл бұрын
Как сделать попап чтобы открывался по времени например через 5 сек после открытия сайта и один раз в 24 часа. Спасибо
@showrun4747
@showrun4747 Жыл бұрын
за такие незапрашиваемые попапы у пользователя только появляется желание поймать разработчика и бить его головой об стол. невероятно раздражает, каждый сайт считает за честь выкинуть окно с авторизацией через сети.
REAL or FAKE? #beatbox #tiktok
01:03
BeatboxJCOP
Рет қаралды 18 МЛН
Арыстанның айқасы, Тәуіржанның шайқасы!
25:51
QosLike / ҚосЛайк / Косылайық
Рет қаралды 700 М.
Модальное окно (popup) практика HTML CSS JavaScript
28:57
Онлайн-школа METHED
Рет қаралды 17 М.
JS-решения №2. Модальные окна на чистом JS
14:20
MaxGraph - cайты как страсть
Рет қаралды 24 М.
Бургер меню - просто. HTML + CSS + JS
22:34
Александр Дудукало
Рет қаралды 41 М.
Вёрстка по-новому. Разбираемся с масками в CSS. 25 июля 2024
2:00:41
REAL or FAKE? #beatbox #tiktok
01:03
BeatboxJCOP
Рет қаралды 18 МЛН