Создание модального окна на CSS3 без использования JS


На сайтах часто можно встретить использование модальных окно (или не очень). Как правило их реализуют с использованием JavaScript. Но можно сделать проще.

С помощью CSS3 создаем простое и легкое модальное окно.

Формируем внешний вид нашего модального окна:

.Dialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	display: none;
	pointer-events: none;
}

Окно будет иметь фиксированное положение, то есть смещаться вниз, если вы будете прокручивать страницу при открытом окне. Также наш фон черного цвета будет расширяться на весь экран. Фон будет иметь небольшую прозрачность, а также располагаться поверх всех остальных элементов за счет использования свойства z-index.

Есть такое свойство pointer-events, оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. Мы его устанавливаем для нашего класса Dialog, так как ссылка не должна реагировать на нажатие мыши когда будет активен псевдо класс :target.

Псевдо класс :target изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку

Псевдо класс :target и стили для модального окна.

.Dialog:target {
	display: block;
	pointer-events: auto;
}
.Dialog > div {
	width: 500px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}

Реализация функционала закрытия окна и формирование внешнего вида кнопки.

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }

И собственно простая HTML разметка.

<a href="#Modal">Открыть модальное окно</a>

<div id="Modal" class="Dialog">
   <div>
	<a href="#close" title="Закрыть" class="close">X</a>
	<h2>Модальное окно</h2>
	<p>Пример простого модального окна, которое может быть создано с использованием CSS3.</p>
   </div>
</div>

И для наглядности ДЕМО

#CSS

Copyright © 2013-2017