Всплывающее окно на чистом CSS

preview_player
Показать описание

––––––––––––––––––––––––––––––

📋 Кратко, о чем это видео

Чтобы сделать полноценное всплывающее окно на сайте не обязательно использовать JavaScript. В этом видео мы создадим модальное окно на CSS, ну и в конце добавим совсем немного JS для блокировки скрола.

Работает всплывающее окно благодаря таким элементам, как checkbox и label. Chekbox сохраняет два логических состояние (выбран/не выбран), а label мы связываем с chekbox'ом, чтобы менять его состояние.

––––––––––––––––––––––––––––––

📌 Ссылки на источники

––––––––––––––––––––––––––––––

🕒 Таймкоды из видео

0:00 Демонстрация всплывающего окна
1:11 Разметка всплывающего окна
4:04 Стилизация всплывающего окна
12:02 Блокировка скролла в JS
13:55 Завершение

––––––––––––––––––––––––––––––

💻 Промокоды на хостинг

FREELAB — для получения 1 месяца хостинга при оплате хостинга на 1 год.
PROLAB — для получения 3 месяцев хостинга при оплате хостинга на 2 года.
Рекомендации по теме
visit shbcf.ru