Как создать модальное окно на чистом CSS без JavaScript

Диалоговое окно — это отличный способ вывести короткое сообщение или информацию. В настоящее время модальное окно является очень популярным элементом веб-дизайна. Если вы добавляете на страницу какой-то особенный контент, то лучше поместить его в модальное окно:

css-Modal-window

Раньше оно создавалось с помощью JavaScript, что на данный момент не считается оптимальной практикой. Но HTML5 и CSS3 позволяют без проблем создавать модальные окна. В этом руководстве мы будем использовать CSS3-переходы, непрозрачность, pointer-event и цвет фона.

Это модальное окно будет разработано на чистом CSS. Оно будет адаптивным и должно нормально работать на смартфонах и планшетах. А также на больших экранах с высоким разрешением.

Создание CSS модального окна

Первым делом нам нужно создать простой HTML-код:

<div class="wrap">
<a href="#modal-one" class="btn btn-big">Open Modal!</a> 
</div>

У нас есть простая ссылка, которая предлагает открыть модальное окно и хэштег modal-one. Мы будем задавать все стили прямо здесь с помощью классов, поэтому идентификатор используется как хук для создания модального поля.

Помните, что мы будем использовать только CSS, а не модальное окно JQuery, поэтому применим псевдо-селектор “:before target”.

Далее нужно сохранить все содержимое модального окна. Внутри div мы поместим гиперссылку. Она закрывает контейнер, который мы выводим с помощью CSS. Затем можно поместить заголовок с несколькими пунктами текста под ним. Наша HTML-разметка теперь будет выглядеть следующим образом:

<!-- Модальное окно -->
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<h2>Modal in CSS?</h2>
<a href="#close" class="btn-close" aria-hidden="true">×</a> <!-- Изменяем на "#close"-->
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="modal-footer">
<a href="#close" class="btn">Nice!</a>  <!--Изменяем на "#close"-->
</div>
</div>
</div>
</div>
<!-- / Модальное окно -->

Задаем стили

Сейчас мы имеем гиперссылку, обернутую в div. Можно приступить к назначению стилей для контейнера, чтобы сделать его более практичным. Сначала создадим класс modal для модального окна на CSS. Для него мы используем псевдоэлемент :before:

.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}

Мы создаем модальное окно, задав для него фиксированную позицию. Оно будет смещаться вниз, когда пользователь прокручивает страницу.

Дополнительно мы устанавливаем для верхнего, правого, нижнего и левого края значение ноль, чтобы затемненный фон охватывал весь экран. Теперь нужно задать фон, рамку, радиус для .modal-dialog, а также фиксированную позицию. Наш CSS код будет выглядеть следующим образом:

.modal-dialog {
background: #fefefe;
border: #333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}

Далее нужно установить для modal-dialog свойство translate в 0. Здесь мы также устанавливаем top: 20%:

.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}

Вот еще несколько стилей, которые нужно использовать, чтобы модальное окно выглядело красиво:

body {
color: #333;
font-family: 'Helvetica', arial;
height: 80em;
}
.wrap {
padding: 40px;
text-align: center;
}
hr {
clear: both;
margin-top: 40px;
margin-bottom: 40px;
border: 0;
border-top: 1px solid #aaa;
}
h1 {
font-size: 30px;
margin-bottom: 40px;
}
p {
margin-bottom: 20px;
}
.modal-body {
padding: 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eee solid 1px;
text-align: right;
}

Теперь, когда мы задали стили модального окна HTML и сделали его функциональным, нам осталось создать кнопку справа снизу. Код CSS:

.btn {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
/* top: 40em;*/
}
.btn:hover {
background: #357ebd;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
/*добавляем, чтобы остановить прокручивание вверх*/
#close {
display: none;
}

В чем преимущества созданного модального окна?

Главным преимуществом нашего модального окна является то, что оно создано с использованием только HTML5 и CSS3. Почему это так важно? Модальное окно Javascript — это то, что может создать даже новичок. Существует масса готовых решений, которые можно скачать в интернете. Так почему мы хотим обойтись исключительно HTML5 и CSS3 без JavaScript?

Ну, например, чтобы пользователи без поддержки JavaScript могли использовать модальное окно. Статистика говорит о том, что более 2% пользователей по всему миру не используют JavaScript.

Мы эффективно использовали несколько строк кода CSS для создания анимации. Если применить любую JavaScript-библиотеку анимации, то будете ошеломлены тем, насколько меньше кода мы использовали. Это дает еще одно преимущество — более чистый код.

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

И, наконец, за HTML5 и CSS3 будущее. Все мы стараемся использовать их в своих проектах. Благодаря им вы получаете более чистый код, не нужно беспокоиться о библиотеках JavaScript. HTML5 и CSS3 с нами надолго, так что нет причин не использовать их.

Заключение

Теперь вы можете создать с помощью HTML5 и CSS3 простое модальное окно, которое можно использовать для формы входа или регистрации, рекламных блоков и многого другого. Кроме этого вы узнали, почему стоит использовать HTML5 и CSS3 вместо JavaScript, и увидели несколько примеров того, как сайты используют модальные окна.

Перевод статьи «How To Make a CSS Modal Window without Javascript» был подготовлен дружной командой проекта Сайтостроение от А до Я.