Модальные окна на чистом CSS

Очень часто возникают ситуации, когда нужно скрыт часть контента от пользователя на первом экране. Например: всплывающие подсказки у характеристик товара в интернет-магазине, окна с настройками, более подробное описание какого либо объекта.

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

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

Так я и дошел до момента, когда мне стало интересно изучить и отработать на практике эту технику.

Разбор метода

Вся суть данного метода заключается в использовании и изменении состояния чекбокса и его оформления при помощи тега <label>:

Сам чекбокс прячется с помощью стилей, а его состояние используется для отображения или скрытия контента:

Код приведённый выше отображает суть метода, без учёта оформления, позиционирования, анимации и т.д. Пример с оформлением смотри в демке.

Возможные проблемы

На самом деле, как видно из кода, всё очень просто. Важный момент при использовании комбинированных селекторов (~), нужно учесть, чтобы код описывающий элемент модального окна шел обязательно после чекбокса, в противном случае стили не будут применяться к модальному окну и ничего работать не будет. С этой проблемой столкнулся и я, путем проб и ошибок я пришел к выводу, что самое верное решение, которое можно использовать, это выносить чекбокс в конец страницы и за ней код модального окна.

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

Спасибо за внимание!

Подписывайтесь на мой Telegram-канал – проводник в мир IT и Web-разработки. Уроки, лайфхаки, личные кейсы, ссылки и обзоры на полезные сервисы.