Модальное окно на чистом CSS — как сверстать

Всем привет!
Сегодня мы с вами продолжим погружаться в невероятные возможности CSS3. Посмотрим, как можно сделать модальное окно на чистом CSS, не используя ни капельки JavaScript. На всякий случай поясню, что модальное окно — это такое всплывающее окно на сайте, которое настойчиво появляется в какой-то момент, блокируя работу сайта до тех пор, пока не закроешь его. Оно может иметь рекламное назначение, призыв к какому-либо действию на сайте, может содержать форму регистрации, или опрос, и так далее. Кто во что горазд.

Сегодняшний основной рычаг — это псевдокласс target.
Допустим, у нас есть на сайте какой-то элемент с id=«example». Для того, чтобы нам, не прокручивая страницу, сразу перейти к этому элементу, нам нужно ввести адрес такого типа: www.oursite/#example. Так вот, когда наш id помещается в адресную строку таким образом, и срабатывает псевдокласс target.
Итак, готовим наш документ html и подключаем стили.
Сразу же придадим нужный вид странице

body {
font-family: Arial, sans-serif;
text-align: center;
background: #DCDCDC;
}

Всплывать наше окно будет по ссылке. Поэтому, в первую очередь создаем ее.

<a class="open-button" href="#open-popup">Открыть модальное окно</a>

Как видим, мы хитро добавили в атрибут href относительный путь для элемента с id=«open-popup». Это добавит нужный элемет к адресу страницы, в которой мы все это делаем, и мы сможем использовать псевдокласс target для нашего модального окна.
Оформим ссылку в виде кнопки. Сразу же добавим ей немножечко анимации при наведении (через свойство transition).

.open-button {
width: 250px;
color: #888;
background: #FFF;
font-family: Arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
letter-spacing: 2px;
position: relative;
top: 50px;
border-radius: 25px;
box-shadow: 0 8px 15px rgba(0,0,0,.1);
padding: 20px;
transition: all .3s;
}
.open-button:hover {
top: 45px;
}

Дальше мы с помощью div делаем слой, который будет перекрывать все видимое пространство сайта и затемнять его. Для этого мы воспользуемся свойством position со значением fixed, и укажем значения для top, left, bottom, right. Этот слой, конечно сначала должен быть скрыт, мы прописываем visibility: hidden.

<div id="open-popup" class="overlay"></div>

Мы указали ему id=«open-popup» как раз для того, чтобы при нажатии на нашу ссылку для открытия окна, и появления этого id в адресе, сделать его видимым. А для плавности его появления, у нас прописана прозрачность, равная 0, которая с помощью свойства transition будет плавно изменяться.

.overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .8);
visibility: hidden;
opacity: 0;
transition: opacity .8s;
}

Внутри этого перекрывающего слоя мы размещаем наше окно

<div class="popup">
<h3>Всплывающее окно</h3>
Как вы сегодня убедитесь, это окно создано совершенно без участия JS и JQuery. Оно сделано на чистом CSS!

<a class="close-popup" href="#">x</a>

</div>

Как видим, здесь же мы разместили ссылку для закрытия окна. Которая будет работать за счет отмены действия псевдокласса target для нашего перекрывающего слоя с id=«open-popup».
Оформляем само окно. Для того, чтобы оно находилось всегда в нужном, одном и том же месте, прописываем ему position: absolute и значения top и left.

.popup {
width: 300px;
color: #333;
background: #FFF;
position: absolute;
top: 20%;
left: 35%;
text-align: center;
padding: 30px;
}

Оформляем содержимое окна

.popup h3 {
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
font-size: 140%;
}
.popup p {
line-height: 1.5;
font-size: 90%;
}

Закрывающий окно крестик тоже оформляем с применением position:absolute.

.close-popup {
position: absolute;
top: 0;
right: 15px;
font-size: 30px;
font-weight: 700;
text-decoration: none;
color: #333;
}

И последнее, самое важноe, наш пусковой механизм

#open-popup:target {
visibility: visible;
opacity: 1;
}

Окно становится видимым и полностью непрозрачным. Непрозрачность возвращается, как мы указали чуть ранее, плавно для более приятного эффекта появления.
Вот и все! Мы сделали модальное окно благодаря только свойствам css3.
Конечно, у него есть некоторые ограничения по сравнению с окнами, сделанными с помощью JavaScript. Например, наше окно не может появляться по таймеру. Но это и не всегда нужно.
При необходимости рабочие файлы можно скачать здесь.


Добавить комментарий