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