Красивые всплывающие диалоговые окна.

Вступление.

Нельзя представить полноценные динамические страницы без красивых всплывающих окон — pop-up. Поэтому в этой статье мы рассмотрим несколько вариантов создания и появления pop-up на странице сайта. Не будем подробно останавливаться на том, что представляет из себя всплывающее окно. Со всей уверенность скажу, что вы неоднократно сталкивались с ними и знаете, что это такое.

Не будем ходить вокруг да около, а сразу приступим к делу — поставим задачу, что же мы хотим получить на выходе.

Итак, давайте создадим красивые всплывающие окна с эффектами анимации: fade и slide, которые будет применяться как к подложке (overlay), так и к самому окну. Для создания эффектов анимации будем использовать исключительно CSS3.

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

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

1. Открытие всплывающего окна. Один и тот же pop-up может открываться по клику на разные интерактивные элементы, расположенные в разных местах страницы.

2. Закрытие всплывающего окна. Pop-up мы будем закрывать тремя способами:
   — во-первых, стандартным способом, кликом по крестику в правом верхнем углу всплывающего окна;
   — во-вторых, по клику на любое место экрана вне всплывающего окна, т. е., по оверлею, который перекрывает и затеняет контент страницы и, при этом, занимает всю площадь экрана, имея ширину и высоту равные 100%;
   — в-третьих, клавишей Esc.

Итак, вроде со всем определились и давайте теперь перейдём к созданию непосредственно всплывающего окна.

HTML-разметка всплывающего окна.

Мы не будем создавать сложную вёрстку на HTML. Создадим overlay, два всплывающих окна и по две кнопки для каждого pop-up, которые их будут открывать. Вёрстка будет практически одинаковая для всех вариантов анимации открытия и закрытия всплывающих окон.

Начнём с интерактивных элементов — кнопок, которые будут открывать наши всплывающие окна:

Обратите внимание на атрибут [data-modal], который прописан у каждой кнопки. В нём указывается id всплывающего окна, которое эта кнопка открывает.

Вы, наверное, заметили, что у некоторых элементов (<div class="overlay"> и <span class="closer">) присутствует атрибут [data-close]. С помощью этого атрибута можно определить все элементы на странице, которые могут закрыть всплывающие окна. В частности, <span class="closer"> — это крестик в правом верхнем углу соответствующего pop-up.

Таблица стилей для всплывающих окон.

Приведём здесь только стили, относящиеся к анимации на CSS3, всё-такие наша основная задача — прокачать скилл владения JavaScript. Чтобы таблица стилей была короче и читабельнее, вендорные префиксы я использовать не буду.

Полный код таблицы стилей вы можете взять из архива. Отметим здесь только некоторые особенности.

И подложке, и всплывающему окну задано position: fixed;. Для чего это необходимо? Во-первых, их позиционирование будет осуществляться относительно границ экрана, а не документа. Во-вторых, при прокручивании колёсика мыши, позиционирование overlay и pop-up останется неизменным.

Начальное и конечное положение всплывающих окон.

Продолжая разговор о позиционировании, остановимся подробнее на положении всплывающего окна. Открытое диалоговое окно должно находится по центру экрана не зависимо от разрешения экрана и размеров самого окна.
Управлять положением диалогового окна будем используя свойства CSS left, top, transform.

Возникает вопрос, а где должны находится всплывающие окна в закрытом состоянии?
Если окно будет управляться анимацией fade, то его изначальное положение также будет по центру экрана. Ещё раз посмотрим стили для этого окна:

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

При таких значениях свойств top и transform нижняя граница всплывающего окна будет совпадать с верхней границей экрана. Но этого оказывается недостаточно. К модальному окну с помощью свойства box-shadow добавляется тень с радиусом размытия 20px. Эта тень будет вылезать из-под верхней границы экрана.
Чтобы устранить этот недостаток нужно изменить значения свойства top на -20px. Теперь с верхней границей экрана будет совпадать нижняя граница тени.

Хочу напомнить ещё раз, что совместное использование свойств CSS left, top, transform с такими значениями, позволяет позиционировать всплывающее окно независимо от его размеров, а также от размеров экрана. Это делает наш код более гибким, независимым и универсальным.

Пишем JavaScript для управления всплывающими окнами с помощью CSS3.

И вот теперь мы добрались до самого главного — написания скрипта на чистом JavaScript, который будет управлять появлением и исчезновением всплывающих окон. Начнём, как обычно с ограничения области видимости и разместим скрипт в анонимной самозапускающейся функции.

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

Открытие всплывающего окна.

Теперь необходимо на каждый элемент из коллекции mOpen повесить обработчик события. После срабатывания обработчика, мы определяем, какое именно окно должно быть открыто и запускаем функцию modalShow, которая и откроет нужный нам pop-up. Обход коллекции сделаем используя метод for...of, а регистрацию обработчика сделаем с помощью метода addEventListener:

Рассмотрим теперь по шагам работу функции modalShow.

• 1

  Добавляем оверлею класс .fadeIn. Этот класс создаёт анимацию — плавное появление подложки в течение 0.4 сек. Предварительно (если есть) удаляем класс .fadeOut.

• 2

  Определяем тип анимации появления всплывающего окна. Этот тип прописан в переменой typeAnimate. На этапе вёрстки, необходимо в самом низу страницы, перед тегом </body>, но выше кода подключения js-скрипта, который мы сейчас пишем, добавить одну из двух строк, которые определяют тип анимации появления всплывающего окна:

  JavaScript

  <script>var typeAnimate = 'fade';</script> // или <script>var typeAnimate = 'slide';</script>

  1 2 3 4 5

  <script>var typeAnimate = 'fade';</script> // или <script>var typeAnimate = 'slide';</script>

  Если typeAnimate === 'fade', добавляем объекту всплывающего окна modal класс .fadeIn, предварительно удалив (если есть) класс .fadeOut.
  Если typeAnimate === 'slide', то добавляем класс .slideInDown, а удаляем класс .slideOutUp.

• 3

  Поднимаем флаг mStatus, присваивая ему значение true. Этот флаг сообщает, что всплывающее окно открыто.

Полный код функции modalShow:

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

Закрытие всплывающего окна.

Теперь нам нужно написать функцию, которая закроет и подложку, и pop-up.
В самом начале скрипта мы создали коллекцию элементов mClose, клики по которым закроют всплывающее окно. Для этого необходимо повесить обработчик события на каждый элемент. Мы опять воспользуемся методами for...of и addEventListener. Если событие click наступило, то вызывается функция modalClose.

Ранее мы решили, что будем закрывать всплывающее окно не только по клику на элементы страницы, но и нажатием на клавишу Esc. Давайте тогда и на неё повесим обработчик события, используя всё тот же метод addEventListener.

Наконец настало время разобраться с работой функции modalClose. Сама по себе функция не сложная и напоминает функцию modalShow. Основное отличие между ними в том, что код функции modalClose находится внутри условия:

Код функции начнёт выполняться, если есть открытое всплывающее окно (вот зачем нам был нужен флаг mStatus) и нет события нажатия клавиши или нажата клавиша Esc (её код — 27).

Мы разобрались как открыть и закрыть красивое всплывающее окно с помощью анимации основанной на CSS3. Хочу добавить только, что по такому же принципу можно сделать появления pop-up из-за нижней или боковой границы окна браузера.