Простое попап окно для сайта

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

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

Итак, в первую очередь, создадим html страницу и разместим в ней разметку попапа:

Стили CSS:

На стилях хотелось бы остановиться более подробно. Класс popup является подложкой попапа, имеет фиксированное позиционирование и полупрозрачную заливку. Центрирование же самого попапа, осуществляется с помощью технологии flexbox. Подложка имеет так же класс popup_hide, который скрывает попап. Соответственно, показ попапа осуществляется путем удаления этого класса, а скрытие — с помощью его добавления

Эффект появления самого попапа (div.popup__body) реализуется с помощью css анимации. Как видно, изначально тело попапа сдвинуто вверх (transform: translate(0, -200%)), а после добавления класса popup__body_visible становится в исходное положение.

Осталось написать скрипт, который будет добавлять/удалять нужные классы и открывать/закрывать попап. Скрипт организуем в виде объекта с 3 методами: инициализация, открытие и закрытие. Такой подход к организации скриптов весьма удобен, т.к его вид краток и нагляден, а так же его легко расширять.

Посмотреть готовый результат можно здесь

Скачать пример

Leave a Reply

Ваш e-mail не будет опубликован. Обязательные поля помечены *