В последнее время, как я заметил, все сайты заполонили попапы. То они пытаются впарить с помощью них какой-либо инфородукт, то интересуются, успел ли я за минуту найти на сайте то, что искал. Чтож, если вы, уважаемые владельцы подобных сайтов, не можете обойтись без подобного говна, то заверните его хотя бы в красивую упаковку. В этом, я вам, так и быть, помогу.
Вот HTML-код для нашего попапа.
<!-- md-effect-<номер от 1 до 19> - номер эффекта; modal-<номер> - id окна -->
<section class="md-modal md-effect-1" id="modal-1">
<aside class="md-modal-content">
<header>Обратите внимание!</header>
<article>
<p>Привет, человечище! Меня зовут Модальное окно и всплыло
я не просто так, а для того чтобы рассказать тебе...</p>
<!-- Кнопка для закрытия попапа -->
<button class="md-modal-content-close">Закрыть!</button>
</article>
</aside>
</section>
<!-- Блок для затемнения фона -->
<div class="md-overlay"></div>
Основной контейнер md-modal
будет отображаться или скрываться (используя класс md-show
), а внутренний контент md-modal-content
будет анимироваться. Теперь наведем красоту с помощью CSS кода:
/* Описание стиля попапа */
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
/* Класс, отвечающий за появление попапа */
.md-show {
visibility: visible;
}
/* Блок для затемнения контента */
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(143,27,15,0.8);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* Появление затемнения, если имеется md-show у общего родителя */
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
Для некоторых эффектов нам потребуется специальный класс для тега html. Это необходимо для создания 3D-эффектов для тега body и содержания. Обратите внимание, что мы предполагаем, что все содержимое страницы (за исключением модального окна), расположено в контейнере:
.md-perspective,
.md-perspective body {
height: 100%;
overflow: hidden;
}
.md-perspective body {
background: #222;
perspective: 600px;
}
.container {
background: #e74c3c;
min-height: 100%;
}
Для каждого эффекта (а их будет 19!) мы будем использовать свой собственный класс. Вот некоторые из них, а остальные вы можете взять из примера:
/* Эффект 3: Слайд, появляющийся снизу */
.md-effect-3 .md-content {
-webkit-transform: translateY(20%);
-moz-transform: translateY(20%);
-ms-transform: translateY(20%);
transform: translateY(20%);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.md-show.md-effect-3 .md-content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
/* Эффект 4: Новостная газета */
.md-effect-4 .md-content {
-webkit-transform: scale(0) rotate(720deg);
-moz-transform: scale(0) rotate(720deg);
-ms-transform: scale(0) rotate(720deg);
transform: scale(0) rotate(720deg);
opacity: 0;
}
.md-show.md-effect-4 ~ .md-overlay,
.md-effect-4 .md-content {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.md-show.md-effect-4 .md-content {
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
opacity: 1;
}
Для наших кнопок, запускающих попап, добавим атрибут data-modal
, в котором будет прописан id
того попапа, который мы хотим показать:
<button class="md-trigger" data-modal="modal-3">Слайд, появляющийся снизу</button>
<button class="md-trigger" data-modal="modal-4">Новостная газета</button>
В некоторых случаях, мы также добавим в кнопку, открывающую попап, класс md-perspective
. Теперь, как все это работает? А работает это все очень просто: при нажатии на кнопку открытия попапа мы с помощью JavaScript добавлем класс md-show
к соответствующему попап-окну и, если это указано, класс md-perspective
для html тега.
Если вы хотите, чтобы эффект/переход происходил только когда модальное окно появляется, а не тогда когда оно исчезает, просто добавьте переход к .md-show.md-effect-x .md-content
правилу (как мы это делали для некоторых примеров).
Для эффекта размытия фона мы воспользовались Polyfilter от Christian Schaefer для поддержки старых браузеров.