HTML & CSS практика | Модальное окно

Поделиться
HTML-код
  • Опубликовано: 15 мар 2021
  • Дружище, я помог тебе? Подари мне кофе ➡☕ yoomoney.ru/to/4100118065342340
    Верстаем модальное окно (попап окно) без каких-либо CSS библиотек и без написания JavaScript кода.
    ❗ Шаблон для старта из видео: github.com/avis-academy/pract...
    ❗ Мой плагин EasyToggler: github.com/rah-emil/easy-toggler
    Не понял какой-то CSS свойство? - ищи его в справочнике и читай о нём: webref.ru/css
    ========================================
    avis-agency.ru - создание сайтов под ключ
    rah-emil.ru - мой сайт и соц. сети

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

  • @user-zb7ef4xj5v
    @user-zb7ef4xj5v Год назад +6

    Не могу найти скрипт

  • @kolapsegamer1678
    @kolapsegamer1678 11 месяцев назад

    Огромное спасибо. Всё понятно!

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

    Интересная и классная задумка, было бы еще классно показать в будущем ее реализацию на сайте с более красивыми стилями, хотелось бы больше материалов под данную задумку)

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

    Спасибо за урок! Хотелось бы узнать, а планируется ли без js написать pop-up?

  • @sychevskyi863
    @sychevskyi863 Год назад +2

    Дуже дякую, виглядає круто, робиться легко. Моя воля до навчання тримається в тому числі на таких людях як ви, дякую велике!

  • @nightmaregame503
    @nightmaregame503 Год назад +5

    Привет, подскажи какой скрипт качать?
    6:39

  • @demidronder
    @demidronder Год назад

    Классное видео

  • @yygdr-
    @yygdr- 2 месяца назад

    У меня такая проблема возникает, когда хочу аниминировать текст, сделать анимацию, модальное окно перестаёт открываться и страница просто перезапускается.

  • @user-yn8qv2kl2i
    @user-yn8qv2kl2i 2 года назад

    Спасибо!

  • @rutorikouman9386
    @rutorikouman9386 Год назад

    Почему в модальном окне не работают чекбоксы?

  • @user-bv1xw5vl6x
    @user-bv1xw5vl6x 6 месяцев назад

    А что делать если оверлэй у меня получается {ширина} х 0

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

    Большое спасибо, ты меня выручил)

  • @wild_snake
    @wild_snake Год назад

    Спасибо!!!!

  • @bektasamangeldi3192
    @bektasamangeldi3192 Год назад +2

    выдели пожалуйста файлы для этого видео, плагин для тех кто не разбирается в джаваскрипт очень сложно найти, да плагин изменился но нифига не понятно(((

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

    Спасибо большое за идею! Единственное, хотелось бы запретить скролл

  • @user-tu1yw5nj9k
    @user-tu1yw5nj9k 2 года назад +2

    Привет!
    Всё сделал по вашему уроку , окно появляется
    но почему-то не хочет закрываться?
    Где посмотреть ошибку, может скрипт не работает?

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

      Не закрывается...

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

      Не закрывает лол, хотел уже скинуть на чай, сорян бро не работает(

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

      @@AVISTV Не закрывается

    • @user-kf5ti4jt3y
      @user-kf5ti4jt3y 2 года назад

      @@AVISTV не закрывается

    • @user-yn8qv2kl2i
      @user-yn8qv2kl2i 2 года назад +4

      Если указать в кнопке Закрыть класс data-easy-class="open", у меня срабатывает.

  • @user-xq8xi3lw5v
    @user-xq8xi3lw5v 6 месяцев назад

    А где обещанный архив под видео ?

  • @user-ev7gv1sq1j
    @user-ev7gv1sq1j Год назад +3

    В твоем Гит Хабе можно сломать ногу. Ты или информацию обновили или удали мусор ненужный, или вывели отдельно папки под это видео...

  • @tomirisabdrakhmanova2243
    @tomirisabdrakhmanova2243 Год назад

    жизнь спас спасибо🥲

  • @saidfish2317
    @saidfish2317 11 месяцев назад +3

    Надо было скрипты самому написать и научить. А то до половины дошел и все испортил своими какими-то кодами непонятными из гитхаба. В целом видео понятное. Было бы отлично чуть убавить скорость и побольше комментить свои действия, почему зачем чему для чего. Удачи

  • @TAGAP1999
    @TAGAP1999 2 года назад +7

    Те у кого не работает закрытие модалки через крестик или фон,просто в кнопках где у вас (и у автора) написано data-easy-class="show",замените на data-easy-class="open"

    • @user-kf5ti4jt3y
      @user-kf5ti4jt3y 2 года назад

      Не выходит

    • @user-yn8qv2kl2i
      @user-yn8qv2kl2i 2 года назад

      @@user-kf5ti4jt3y Если указать в кнопке Закрыть класс data-easy-class="open", у меня срабатывает.

    • @user-kf5ti4jt3y
      @user-kf5ti4jt3y 2 года назад

      @@user-yn8qv2kl2i да я че то там подшаманил, все получилось

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

      почему open, ведь для отображения окна добавляется класс show, но он не удаляется

  • @user-tf3yp7mv3g
    @user-tf3yp7mv3g Год назад +1

    Привет делаю сайт для сервера майнкрафт.Сделал всё по гайду все хорошо но не закрываеться.Что делать?П
    омогите пожалуйста!

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

    у меня не работает затемнение сайта, окно появляется, все супер, но затемнения нет.. что мне сделать?

    • @LotusesFlowers37
      @LotusesFlowers37 Год назад

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

    • @say_red
      @say_red Месяц назад

      @@LotusesFlowers37 привет, можешь код скинуть весь, долго сижу, не понимаю, где ошибка

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

    Текущая версия скрипта не работает (1.2) не закрывается окно

    • @bektasamangeldi3192
      @bektasamangeldi3192 Год назад

      @@AVISTV привет бро, не нашел именно тот файл который на видео min.js ответь плиз не могу разобраться

  • @ltunfbnmk
    @ltunfbnmk 2 месяца назад

    Привет!

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

    Надо с самого начала было говорить, что полностью в CSS модальное окно не сделать, что нужны JS или коды специальные.

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

      Сделать можно и на чистом CSS, но это очень и очень неудобно.
      А тут…) Тут вы и не пишите JS код. Только html атрибуты. Кайфуйте с ними🥰

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

      @@rah_emil расскажите пожалуйста каким образом вы сделаете модальное окно, которая будет показываться/скрываться при клике на чистом CSS.

    • @rutorikouman9386
      @rutorikouman9386 Год назад

      @@ronaldreagan5591 через лэйблы и чекбоксы можно сделать

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

    у меня не открывается окно😂

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

    У меня не закрывается окно

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

      версия 1.2 не работает, с 1.1 все нормально

  • @showrun4747
    @showrun4747 8 месяцев назад

    пойдёт. музыку только дурную убрать и нормально

  • @ninetailz3675
    @ninetailz3675 6 месяцев назад

    Не знаю автор просматривает старые комментарии или нет, но ооооочень нужна помощь, почему то после вставки скрипта и class="btn-close" data-easy-toggle="modalWin" data-easy-class="show" окно не открывается

    • @AVISTV
      @AVISTV  6 месяцев назад

      Решетки к modalWin не хватает

    • @ninetailz3675
      @ninetailz3675 6 месяцев назад

      @@AVISTV Ставил, не помогло)

    • @rah_emil
      @rah_emil 6 месяцев назад

      @@ninetailz3675тогда хз)
      Код надо смотреть уже

    • @9yuliexnx2
      @9yuliexnx2 6 месяцев назад

      в 5 строк кода можно написать скрипт, не требующий лишних атрибутов для кнопок, если нужно еще покажу

    • @ninetailz3675
      @ninetailz3675 6 месяцев назад

      @@9yuliexnx2 Благодарю за ваш энтузиазм в помощи, уже разобрался сам)

  • @user-zt9wu8qr3t
    @user-zt9wu8qr3t Год назад +2

    Классный видос. HTML & CSS практика | Модальное окно, ну и там чуть JS будет, вы просто скачайте, но я его обновил уже 50 раз, поэтому не скачаете, там в комментах поройтесь авось найдете.
    По итогу на Html и CSS тут только кнопку наверстал и окно добавил, все остальное тупо скачать. Название кликбейт

    • @user-zt9wu8qr3t
      @user-zt9wu8qr3t Год назад +2

      @@AVISTV Ответ достойный материала

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

    зачем так мучаться...

  • @ranger-777
    @ranger-777 7 месяцев назад

    Uncaught SyntaxError: Unexpected token 'export' (at tools:385:1650)/ мотаем на следующего блогера

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

      Да, пожалуйста)

    • @TikTok-eh2tk
      @TikTok-eh2tk 7 месяцев назад

      ​@@AVISTVответил, значит поясни что делать , после скрипта вообще окно не всплывает