Простые модальные окна на HTML5, CSS3

Часто бывает необходимо показать какой-либо контент в модальном окне (в всплывающем окне, по-другому). Например, форма подписки, заявки или регистрации. Это удобно и “юзер-френдли” )

Недавно тоже возникла необходимость показать форму подписки в таком окне. Немного побродив по просторам интернета и попробовав несколько вариантов, остановился на таком варианте модального окна. Его преимущество – не использует никаких скриптов, окно сделано на чистом html+css и удобно добавляется на любую страницу.

ДЕМО

CSS код

Вставляем до закрывающего тега head или подключаем отдельным файлом.

HTML код,3 примера

Соответственно вставляем в нужное место на странице. Если на странице модальных окон будет несколько, меняем для них идентификатор modal-1 в самих окнах и в ссылках или кнопках.

Отправить ответ

Оставьте первый комментарий!

avatar
wpDiscuz