Модальное окно на ЧИСТОМ JS + CSS. Урок 1

Поделиться
HTML-код
  • Опубликовано: 10 ноя 2024

Комментарии • 509

  • @VladilenMinin
    @VladilenMinin  2 года назад +4

    Исходники тут: t.me/js_by_vladilen/138
    Получить профессию Frontend разработчика -
    bit.ly/3nnuLAb

  • @VladilenMinin
    @VladilenMinin  4 года назад +597

    Как вам идея нового плейлиста?

    • @barmaxon
      @barmaxon 4 года назад +40

      Заебись :)

    • @replicant9611
      @replicant9611 4 года назад +3

      весьма

    • @yakut54
      @yakut54 4 года назад +4

      Ништяк

    • @nekotoriy
      @nekotoriy 4 года назад +1

      супер!

    • @Virisound
      @Virisound 4 года назад +4

      Отличная, нужная, необходимая.

  • @ЮрийБарабаш-г4д
    @ЮрийБарабаш-г4д 4 месяца назад

    Владилен очень крут. Он очень быстро умеет писать код. Он все знает и во всем разбирается. Быстро и непонятно говорит. Он очень умный. Кто бы меня научил всему этому? Кто бы смог это все объяснить просто и понятно? Пойду поищу. Такие люди есть я знаю точно.

  • @АртёмМалов-ф1э
    @АртёмМалов-ф1э 2 года назад +7

    Владилен, большое спасибо Вам за Ваши уроки! И теоретическая и практическая части очень подробные и понятные.

    • @Hacking-NASSA-with-HTML
      @Hacking-NASSA-with-HTML Год назад

      ага. И половина из всего - и нафик не нужна 😂 Чистейшая муть

  • @StetskoV
    @StetskoV 3 года назад +2

    Владилен, огромное Вам спасибо за данный ролик, прохожу данный плейлист (Вы очень круто и БЕЗ ВОДЫ все рассказываете). Прохожу его после "Сложный JavaScript простым языком" (овер полезный!!! - всем рекомендую). Данный плейлист прохожу и он как раз показывает (на современный лад) как работают, всеми используемые элементы из библиотек типа Бутстрап, как все работает под капотом - дорогого стоит!
    ОГРОМНОЕ Вам спасибо!

  • @osmon-11
    @osmon-11 4 года назад +28

    О наконец практические работы, класс.

  • @DmitryiTrushin
    @DmitryiTrushin 4 года назад

    всё просто - о первых Ваших словах этого поста- креатив для программиста - половина успеха. Начал изучать фреймворки js с декабря - сейчас три проекта по Вашим, в том числе, урокам - блог на vue-inkline, приют для домашних животных сайт будет, инет магазин bootstrap - с загрузкой и выгрузкой партнерских xml - файлов, маленькая интерактивная crm для небольшой адвокатской конторы. Всё бесплатно отдам людям, себе оставлю опыт )

  • @sportpro25
    @sportpro25 3 года назад +4

    Спасибо, Владилен, за материал по Javascript. Все подробно, наглядно и без воды.

  • @stadybear4607
    @stadybear4607 4 года назад +27

    Привет. Крутая идея, спасибо. Только небольшое пожелание - перед началом реализации было бы круто если бы четко формулировал что именно собираешься сделать на данном этапе, по типу ТЗ или вообще превью того, что уже позже выйдет, ибо я вот хотел сам попытаться сделать и потом сравнить с твоей реализацией, но как-то толком постановки задачи не услышал конкретно и сразу пошел код твой. Еще раз спасибо, очень качественно выделяешься в сторону "no bs" обучения на ютьюб, даже странно немного :)

  • @spyinfooo
    @spyinfooo 4 года назад +81

    Отличная советская атмосфера для продуктивной работы)

    • @VladilenMinin
      @VladilenMinin  4 года назад +18

      Для советских и не только людей)

    • @taalayedtech
      @taalayedtech 4 года назад

      ??? 🤔советская?

    • @АлексейЛ-ч6р
      @АлексейЛ-ч6р 4 года назад +5

      @@taalayedtech советы от души и для всех бесплатно)

    • @CheapDiamond-x6u
      @CheapDiamond-x6u 7 дней назад

      @@taalayedtech v nachale video u nego bil fon takoy

  • @АртурБеленченко
    @АртурБеленченко 4 года назад +6

    Спасибо Вам большое Владилен! Мне очень помогли Ваши уроки по JavaScript, а теперь ещё больше практики, это очень важно, поддерживаю Вашу идею и жду следующие видео)

  • @gamedevua5295
    @gamedevua5295 4 года назад +4

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

  • @ИгнатАникович
    @ИгнатАникович 4 года назад +2

    Все инфа без воды и пафоса. Спасибо тебе. Ты, реально, топовый

  • @velessn
    @velessn 4 года назад +6

    Спасибо Владилен за практические уроки по JS.Реализация в виде плагинов это то что нужно.

  • @МиронД-э4ш
    @МиронД-э4ш 2 года назад

    Интересно? -> Очень
    Полезно? -> Очень
    Огромное спасибо за твой труд.
    Лайк само собой !!!!
    Очень полезный формат. Формат самый что надо! Побольше практики на основе JS

  • @PavloPoprotskiy
    @PavloPoprotskiy 3 года назад +2

    Супер ! Отлично! А самое главное что понятно и повторимо!

  • @ВейсалТаштанов
    @ВейсалТаштанов 4 года назад +1

    Не знаю, как у многих тут, но я почему то получаю кайф именно когда пишу на чистом JS, при этом стараюсь использовать как можно меньше функций высшего порядка. Реально удовольствие доставляет это) А Владилену, как обычно, лайк не глядя.

  • @mykhailobokalo6037
    @mykhailobokalo6037 4 года назад +2

    Очень нужно такой формат! Спасибо за труд.

  • @igorshved2224
    @igorshved2224 3 года назад

    Отличные уроки. Наконец для себя нашел того учителя, материал которого заходит на ура

  • @abathojalyk1625
    @abathojalyk1625 4 года назад

    Vladilen, vse otlichno..i uroki i podacha i tvoe otnoshenie k delu. Respect!

  • @mrybsdev1006
    @mrybsdev1006 3 года назад +4

    Чел, я даже не досмотрел и понял, как это сделать. До этого я вообще не понимал как это работает, т.к. не силен в вебе. Спасибо большое

  • @MegaTesei
    @MegaTesei 2 года назад

    Тайкой формат видео интересен и полезен. Достаточно интересное Домашнее задание, правда не понял про хуки (слэнг новый, не понимаю о чём речь). Сложность интересная, вначале трудновато,но после 10 минут разбора кода всё становится понятно.

  • @СаняПлюс-у7й
    @СаняПлюс-у7й 4 года назад

    Я для практики делал карусель. Написал функцию-констурктор, которая принимает один аргумент - объект. Первое свойство обязательное - ссылка на DOM-элемент с дочерними, все остальные - по желанию (навигация кнопками, точками, классы, автозапуск и т.д.)

  • @userbilas
    @userbilas 4 года назад +1

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

  • @zenfen9442
    @zenfen9442 7 месяцев назад

    Спасибо за отличные уроки. Все-таки это правильно для обучения обозначать отдельным именованиями с префиксами-подсказками элементы, функции и прочее, чтобы было понятно начинающим что используется в настоящий момент. А то и тут modal и там modal но уже в качестве функции, а так modal, funcModal - отлично понятно. ДА и по ходу легче понимать и не надо вспоминать, что это элемент, класс, функция или что-то еще. То есть снизить порог вхождения для понимания.

  • @progtime2000
    @progtime2000 4 года назад

    Создание плагинов очень интересная тема. Спасибо за урок!!! Хотелось бы видео о том как создавать отдельные плагины для Vue.js с возможность их подключения через тег .

  • @Harut-u4k
    @Harut-u4k 3 года назад

    Офигенное видео. Надеюсь не забросишь этот плейлист

  • @КонстантинЛысов-у8р
    @КонстантинЛысов-у8р 4 года назад +1

    Очень крутое видео👍 надеюсь в плейлисте будет много уроков)
    Спасибо за контент, смотрю с удовольствием)

  • @khamzatseynaroev6310
    @khamzatseynaroev6310 4 года назад +3

    видос от Владилена - сначала лайк, потом просмотр )))))
    спасибо за отличный контент

  • @НиколайКвасов-п5и
    @НиколайКвасов-п5и 4 года назад +1

    Однозначно полезно. Однозначно буду участвовать, по возможности. Продолжайте плейлист пожалуйста, Владилен

  • @foryoutubefor4248
    @foryoutubefor4248 3 года назад +1

    а Vi очевидно потомучто Владилен. Прелесть!!!

  • @АлексейСедов-й5м
    @АлексейСедов-й5м 4 года назад +2

    Спасибо за уроки. Очень крутая подача материала. Хотелось бы ролик про ооп, а именно про то когда и какие классы создавать, какие классы будут наследоваться и т.д.
    ВААЖНО именно на реальных примерах, а не условный глобальный класс животные с методом бег и от него наследует класс кролики со своими методами. Лично мне очень не хватает понимания этих моментов. Допустим на примере интернет магазина - классы «корзина», «форма» и т.д какие классы должны будут наследоваться от них и т.д

  • @ИринаВолхонская-е9щ
    @ИринаВолхонская-е9щ 4 года назад +5

    Владилен, спасибо огромное за эту возможность делать практику! Ее очень мало с разбором что? к чему и почему? На одном дыхании! Все очень понятно! пожалуйста, продолжайте! :)

  • @iliasadkovoi7793
    @iliasadkovoi7793 2 года назад

    Вот кто бы что не говорил ,фон просто офигенный . Показывает обычную жизнь Русского человека

  • @nickkorolev8869
    @nickkorolev8869 4 года назад

    Владилен, идея с задачами ТОП! Новый уровень! Это как взаимодействие с аудиторией)))Как насчёт того, что лучшие работы например потом выставлять на показ?) и может какую-то плюшку (какие-то закрытые видео) учащемуся подгонять ?) стимул будет ! -) и в очередной раз огромное спасибо за труд ! Твоя подача материала в СНГ нет равных!!!

    • @VladilenMinin
      @VladilenMinin  4 года назад

      Можно подумать в эту сторону)

  • @ВолодимирДонцов-ш3ь

    Буду пересматривать. Буду пробовать решать задачи. Нужная и правильная тема.

  • @сергейЛесневский-ю1ь

    Добрый день, очень интересно, смотрю и учусь по вашим роликам, удачи вам)))

  • @yuryitikhonoff9631
    @yuryitikhonoff9631 4 года назад

    Очень круто. Респект за best practices для неопытных маслят.

  • @skyprime3641
    @skyprime3641 2 года назад +1

    v- Владилен, это база

  • @АлександрИванов-ч9у7я

    Спасибо большое за Ваш контент !!! супер классно заходит!!!

  • @WanKy182
    @WanKy182 4 года назад +2

    Очень интересно и информативно. Ждём следующих

  • @АндрейКадочников-д3б
    @АндрейКадочников-д3б 4 года назад +4

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

  • @disconnect-forever
    @disconnect-forever 4 года назад +1

    Идея отличная. Ждем продолжения. Спасибо)

  • @dmitriyegorov4764
    @dmitriyegorov4764 4 года назад +2

    Спасибо, Владилен! Очень полезный плейлист!

  • @bohdanrazor5684
    @bohdanrazor5684 4 года назад +1

    Да, полезен, продолжай. Спасибо! Лайк в карму!!!

  • @DIEZ919191
    @DIEZ919191 4 года назад +2

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

  • @MsPervouralsk
    @MsPervouralsk 4 года назад

    Супер! Обязательно продолжай.

  • @antonkudrin7060
    @antonkudrin7060 4 года назад

    Владилен практика просто топчик ) И практикуйся и свои знания укрепляю) Хотелось бы больше практики. Спасибо за ваш труд )

  • @seventeen8777
    @seventeen8777 2 года назад

    смотрю на тебя, а ты оказывается не только программист но и еще чемпион юфс в легком весе!)

  • @VladiGuitar87
    @VladiGuitar87 4 года назад

    Красава! Не забивай на этот плейлист!

  • @alexlmaxl4966
    @alexlmaxl4966 4 года назад +2

    Спасибо за контент, ждём продолжения!

  • @boburnazirov5495
    @boburnazirov5495 3 года назад +2

    Спасибо огромное за топовые видосы)

  • @lightxlampax
    @lightxlampax 3 года назад

    Ооооочень круто! Спасибо
    Практика заинтриговала
    Готовлюсь к Senior курсу =)

  • @lavrinov_is2591
    @lavrinov_is2591 4 года назад

    Идея огонь! Подход к подаче материала огонь, не то чем напичкан ютуб, а что-то новое!) Пожеланием будет не проподать на недели), а выпускать видео по затронутой теме (в данном случае про модальное окно) с интервалов в 1-2 дня и не важно какой длины эти ролики! Также в данной подаче интересно было бы посмотреть на создание slider'а aka carousel, наверное чаще чем тему модального окна и слайдера не ищут больше ничего)) Ну и спасибо за материал!

  • @Antonio-fm1sq
    @Antonio-fm1sq 4 года назад +1

    Мужик, как же ты крут! Спасибо!

  • @trueblackat5566
    @trueblackat5566 4 года назад +1

    Вместо оперирования с z-index для анимации лучше использовать visibility (на это свойство вешается transition). За видео спасибо!

  • @4wesome_maks30
    @4wesome_maks30 4 года назад

    Темы для следующих видео : работа со скроллом (например,проверка когда элемент находиться в видимой области что-то с ним делать,можно тротлинг показать заодно) , слайдер на js , корзина товаров , работа с канвас

  • @grechino2412
    @grechino2412 4 года назад +1

    Отличный формат, очень полезно!

  • @Civilizer1976
    @Civilizer1976 4 года назад

    Ура!!! наконец-то дошёл до практики :) Правда пропустил видео про JS-паттерны. Надеюсь здесь они не понадобятся. Просто нет терпежа уже никакого изучать и конспектировать чисто теорию.

  • @zhakelee6432
    @zhakelee6432 4 года назад +5

    Думаю надо все скрипты писать в одну документ, а то запутался. Для новичков так понятно, думаю.

  • @ВикторИванов-т6ч3ъ
    @ВикторИванов-т6ч3ъ 2 года назад

    Спасибо за контент! давно подобное ищу. давай больше роликов))

  • @ДаниилЧернавин-ь1о
    @ДаниилЧернавин-ь1о 4 года назад +1

    Мне 45, а я как молодой пацан увлекся программированием. Я не хочу устраиваться на работу программистом, хочу просто получать удовольствие от процесса. И ваши видео для меня как вкусный десерт на завтрак. ))

    • @DmitryiTrushin
      @DmitryiTrushin 4 года назад +1

      да мне даже и побольше ) но я правда программистом и работаю, но там скука и не то немного - а за веб взялся только вот недавно. И тоже - просто ради удовольствия пока..

  • @imvasia13
    @imvasia13 4 года назад +2

    Огромное спасибо!
    Тема супер, продолжай!!)

  • @silhouette-f4w
    @silhouette-f4w 4 года назад +3

    ахуенно!!!
    нарекаю этот плейлист отныне быть моим любимым!!
    штампуй хоть каждый день видосы, буду по несколько раз пересматривать))

  • @apsolution4722
    @apsolution4722 4 года назад

    Качественный контент, спасибо за полезную информацию!

  • @РоманГуляев-ц2ш
    @РоманГуляев-ц2ш 3 года назад +1

    Красавчик!!! респ!!!!!

  • @aleksdobriy6941
    @aleksdobriy6941 4 года назад +2

    Vladilen front-end framework 👍

  • @arturbilyi1010
    @arturbilyi1010 4 года назад

    Проходить будем, ждем еще уроков

  • @koekto1816
    @koekto1816 4 года назад +3

    Спасибо за данного рода контент! В контрасте всего РУ ютуба это как глоток свежего воздуха. Жду продолжение...

  • @exploringtheworld8780
    @exploringtheworld8780 3 года назад +1

    Огромное спасибо!СуперСуперСупер класс.)))!!!

  • @ВадимЯковенко-я1в
    @ВадимЯковенко-я1в 4 года назад

    Я вместо z-index использую всегда pointer-events, значение none когда нет модалки и значение auto когда модалка есть, таким образом анимация исчезания идет без добавления дополнительного класса, немного меньше кода выйдет. Это конечно если не надо IE10 поддерживать =)
    А вообще заготовка модального окна должна быть у всех. По этому было бы круто сделать такую, но толковую мега, отключать скролл (а это бывает ой как не легко), добавлять при необходимости прокрутки внутри модалки.

  • @promax866
    @promax866 4 года назад +5

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

  • @СашаРопій
    @СашаРопій 4 года назад

    Уважаемый Владилен, большое Вам спасибо!

  • @a-sher
    @a-sher 4 года назад

    отличный плейлист. жду продолжения))

  • @MaxYanov
    @MaxYanov 4 года назад

    полезен ли, да это мега круто Владилен
    как всегда легко, доступно и понятно
    лайкос

  • @kvizzyt7548
    @kvizzyt7548 4 года назад +6

    годнота, идея просто офигенная. Хочу стать веб разработчиком, делай больше того, что встречается чаще всего и делает сайт качественным. Сделай потом навбар какой нибудь, анимации, красотищу ;3

  • @user-kw3ke3pt8x
    @user-kw3ke3pt8x 4 года назад

    Д д , предлагаю , как вариант , изменить концепцию подачи информации , с по частям в целсостный , последовательный формат( разбитый на уроки ) , (тз - решение) **х , на мой взгляд сами части и их целесообразность лучше понимаются в целом , как например практический курс Петриченко созданный из 3-ёх тз . И как тим лид Вы так же должны быть в курсе какие задачи ставятся перед сотрудниками , думаю если бы Вы продублировали в качестве урока (ов) Вашу задачу в формате задача - решение (под ключ) это тоже было бы интересно . С Уважением ... .

  • @TheBorninmotion
    @TheBorninmotion 4 года назад

    Круто ! Отличная идея ! Только практика !!

  • @pavelalex420
    @pavelalex420 2 года назад

    Добрый день.
    Спасибо огромное!
    Я с удовольствием смотрю, изучаю и по многу раз повторяю все написанное.
    Очень надеюсь, что будет намного больше, решений задач, примеров, и этот курс будет продолжаться!!
    P.S. запиши, пожалуйста, видео, где объясни принцип взаимодействия js, html, css, git. (логику). (Для новичка, чтоб понимать, как это все вообще работает😆.)
    Благодарю!

    • @Hacking-NASSA-with-HTML
      @Hacking-NASSA-with-HTML Год назад

      покажи мне свой гитхаб с рабочей версией этого замечательного урока!

  • @Ziraman13
    @Ziraman13 4 года назад

    реально нужный плейлист
    жду продолжения

  • @ПавелОстаточников
    @ПавелОстаточников 4 года назад +1

    Отличный контент. Буду участвовать в движухе)

  • @alishermereke2953
    @alishermereke2953 4 года назад +1

    Вот только побольше бы роликов в этом плейлисте

  • @hwd1978
    @hwd1978 3 года назад +1

    Отличное видео! Было очень интересно и полезно! Спасибо!

  • @ДмитрийАрзяков-б4р
    @ДмитрийАрзяков-б4р 3 года назад +1

    Интересный формат.

  • @ВикторГусев-н5т
    @ВикторГусев-н5т 2 года назад

    Очень и очень круто! Спасибо огромное! очень помогло в обучении

  • @ВиталийБоднар-е1я
    @ВиталийБоднар-е1я 4 года назад

    Как! Ну вот как ты это делаешь - ну просто то что доктор прописал, как раз второй день с модалками ковыряюсь... кстати, в роли джуна, кстати, на своей первой работе, кстати, которую нашёл после прохождения твоего курса по ангуляр на удеми - спасибо тебе ;). Как и говорил ранее - покупка курса на удеми, была моим лучшим вложением десяти баксов.

  • @dmitriif.6270
    @dmitriif.6270 3 года назад +1

    очень классное видео!!! спасибо!

  • @curillaenator
    @curillaenator 4 года назад

    Возьмите на работу за еду! Джуном, кем угодно, лишь бы можно было кодить и практиковаться! HTML и CSS освоить не сложно, а JS на таком уровне, как показываете, скрепя зубами еле еле понять выходит, а очень хочется освоить фронтэнд на хорошем уровне))) Ваши уроки и подход - класс!

  • @БекболБекжанов-д3б
    @БекболБекжанов-д3б 4 месяца назад

    Здравствуйте, Владилен !

  • @ivankomar4227
    @ivankomar4227 4 года назад

    буду участвовать в движухе, идея для плейлиста интересная. Чувствую, что задачи вызовут у меня трудности)

    • @VladilenMinin
      @VladilenMinin  4 года назад

      Задачи должны быть чуть выше наших умений, тогда и идёт прокачка)

  • @base-color
    @base-color 4 года назад

    Владилен, бесспорно ты талантлив в своей стезе. Не было ли у тебя идеи обучения практики с поддержкой ? Даёшь задание , к заданию даёшь логическую последовательность действий для реализации? Что посоветуешь для того, чтобы такого скоростного набора текста ?

    • @VladilenMinin
      @VladilenMinin  4 года назад +1

      В процессе создания такого. Думаю будет весной

  • @ЕгорПопов-ю1с
    @ЕгорПопов-ю1с 4 года назад +2

    Здравствуйте, подскажите, пожалуйста, что такое "инстенс"?

  • @ResultSchool
    @ResultSchool 2 года назад +2

    Для тех, кто хочет освоить профессию Frontend разработчика за 7 месяцев -
    bit.ly/3yrjXqU
    Освоить основы веб-разработки бесплатно. Курс по HTML & CSS - bit.ly/3yp7CUe

  • @ИловМакс
    @ИловМакс 4 года назад +1

    Кстати а почему захардкодили время анимации на скрытие, а не использовали событие addEventListener("transitionend", ) ?

  • @slapiinf518
    @slapiinf518 4 года назад

    О, крутой плейлист. Очень мало подобного.

  • @ЕгорШереметов-л4э
    @ЕгорШереметов-л4э 4 года назад

    Клёво, практика это хорошо) Единственное, что для меня не до конца ясно - почему бы просто не добавить класс close, который будет присутствовать по умолчанию, и при вызове функции close можно просто удалять класс open и добавлять класс close, без всяких таймаутов

  • @AlexGymbee
    @AlexGymbee 4 года назад

    супер) в своем проекте как раз буду делать на днях модальное окно) тема очень кстати

  • @evg_ep
    @evg_ep 4 года назад

    Двумя руками За, отличный материал! Спасибо.

  • @mator7359
    @mator7359 2 года назад

    Здравствуйте Хорошо обясняете

  • @web_cinema9617
    @web_cinema9617 7 месяцев назад +1

    Как же запутанно, сложно и долго ты обьясняешь такие простые вещи.