C помощью CSS3 модальное окно можно создать без использования JavaScript и изображений. Задействовав немного анимации, преобразований и переходов окну можно придать очень интересный вид.
В данном уроке мы создадим модальное окно, которое будет открываться при нажатии на кнопку. В браузерах, которые поддерживают анимацию, будет использоваться отличный эффект для появления окна. Когда модальное окно будет открытым, все другие элементы на странице будут недоступны. Закрытие модального окна также сопровождается анимацией. В уроке используется тег <aside>, но вы можете использовать <nav> или <details> в зависимости от необходимости.
Конечно же, использование изображений и JavaScript делает модальные окна только лучше. Кроме того, закрытие окна по нажатию клавиши ESC нельзя сделать через CSS. Так что чисто решение на CSS достаточно редко используется в реальных проектах. Однако знание о таких возможностях существенно влияет на квалификацию разработчика, и, кроме того, веб технологии постоянно развиваются.
Как работает?
Псевдо селектор :target изменяет стиль целевого элемента. Комбинирование указание ссылкой на элемент с :target и изменением видимости/прозрачности дает в итоге механизм для вывода/скрытия окна. Для улучшения анимации, которая становится дерганной при использовании display:none, сочетаются :target, opacity и pointer-events:
.modal {
opacity: 0;
pointer-events: none;
}
.modal:target {
opacity: 1;
pointer-events: auto;
}
Модальное окно имеет две части: контейнер и содержание. В идеале, контейнер должен генерироваться с помощью псевдо элемента, но на момент написания урока данный метод не работает. Контейнер растягивается на всю страницу и притеняет фон с использованием rgba. Большое значение свойства z-index размещает модальное окно поверх страницы.
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;
…
}
Содержание позиционируется посередине и "приглаживается" тенями, скругленными углами и градиентом.
Есть две анимации. Одна называется “bounce” ("прыжок" - происходит масштабирование до немного большего размера, затем возвращается все к норме). Другая называется “minimise”, и она действует в обратном направлении. Для них используется комбинация трансформаций прозрачности контейнера.
Простая трансформация прозрачности:
.modal {
…
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
Анимация масштабирования, хотя и выполняется в 2D, использует scale3d для аппаратного ускорения. Чтобы сделать появление окна более реалистичным тени также анимируются, что создает нагрузку на производительность.
@-webkit-keyframes bounce {
0% {
-webkit-transform: scale3d(0.1,0.1,1);
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
}
55% {
-webkit-transform: scale3d(1.08,1.08,1);
-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
}
75% {
-webkit-transform: scale3d(0.95,0.95,1);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
}
100% {
-webkit-transform: scale3d(1,1,1);
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
}
}
@-webkit-keyframes minimise {
0% {
-webkit-transform: scale3d(1,1,1);
}
100% {
-webkit-transform: scale3d(0.1,0.1,1);
}
}
Для изменения анимации при открытии мы используем каскад и переписываем анимацию по умолчанию с использованием :target:
.modal > div {
…
-webkit-animation: minimise 500ms linear;
}
.modal:target > div {
-webkit-animation-name: bounce;
}
Кнопка Закрыть является скрытой ссылкой со стилизованным псевдо-элементом ::avto, который масштабируется при наведении курсора мыши. Так как мы скрываем оригинальную ссылку, то нужно сделать "прыжок" через изменение состояния псевдо-элемента :focus. Методы традиционная обрезка, выравнивания текста и скрытия видимости не работают, поэтому используются color:transparent и несколько специфических стилей для :focus.
.modal a[href="#close"] {
…
color: transparent;
}
.modal a[href="#close"]:after {
content: 'X';
display: block;
…
}
.modal a[href="#close"]:focus:after,
.modal a[href="#close"]:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}
.modal a[href="#close"]:focus:after {
outline: 1px solid #000;
}
Предупреждения
Данный метод не работает в IE8 и старше, где нет поддержки pointer-event и плохо реализована поддержка прозрачности. IE9 поддерживает :target, но не pointer-event.
Пользователи могут воспользоваться клавишей TAB для переключения по ссылкам под затеняющим слоем и активировать их. Единственное решение - игнорировать состояние :focus.