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

Подписаться 10 тыс.

Просмотров 32 тыс.

50% 1

Дружище, я помог тебе? Подари мне кофе ➡☕ 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 - мой сайт и соц. сети

Опубликовано:

15 мар 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

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

@user-zb7ef4xj5v Год назад

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

@nightmaregame503 Год назад

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

@dimarus5642 3 года назад

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

@rutorikouman9386 Год назад

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

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

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

@yygdr- Месяц назад

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

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

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

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

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

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

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

@bektasamangeldi3192 Год назад

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

@user-ev7gv1sq1j Год назад

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

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

Спасибо!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@demidronder Год назад

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

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

Спасибо!!!!

@sychevskyi863 Год назад

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

@user-tf3yp7mv3g Год назад

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

@user-tf3yp7mv3g Год назад

все я пофиксил

@TAGAP1999 2 года назад

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

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

Не выходит

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

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

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

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

@Ivan_Balakirev Год назад

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

@tomirisabdrakhmanova2243 Год назад

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

@dergachenok 2 года назад

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

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

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

@LotusesFlowers37 Год назад

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

@say_red 19 дней назад

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

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

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

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

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

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

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

@rutorikouman9386 Год назад

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

@Ivan_Balakirev Год назад

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

@bektasamangeldi3192 Год назад

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

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

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

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

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

@jolyartem9305 2 года назад

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

@Ivan_Balakirev Год назад

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

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

Привет!

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

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

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

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

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

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

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

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

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

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

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

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

@user-zt9wu8qr3t Год назад

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

@user-zt9wu8qr3t Год назад

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