Адаптивное модальное окно средствами HTML5 / CSS3

CSS3 дает разработчикам возможность добавлять некоторые дополнительные функции, которые когда-то были возможны только с помощью JavaScript. Вы можете достичь те же самые эффекты, используя только CSS3. Вы также можете создать анимацию, используя CSS переходы, а не JavaScript. Вы даже можете создать кнопку, чтобы открыть и закрыть модальное окно, используя только CSS3 псевдо-селектор “:target”.

“:target” действует так же, как другие псевдо-селекторы действовать такие как “:active” и “:hover”. Когда пользователь наводит курсор на элемент, стили, которые установлены для этого элемента “:hover” будет активирован. “:target” будет активирован для элемента, когда браузер нацелен этот элемент, как правило, с хэш-тега. Например, наш модальный элемент имеет на нем идентификатор “modal”, так что целевое состояние будет срабатывать, когда у браузера будет активирован хэш-тег “#mymodal”. Это то, как мы активируем нашу модальное окно.

HTML:

<a href="#mymodal">window</a> /* Кнопка вызова модального окна */

<aside id="mymodal">
  <header>
    <h2>Заголовок модального окна</h2>
  </header>

  <section>Lorem ipsum dolor sit amet...</section>

  <footer><a class="button" href="#">Закрыть</a></footer>
</aside>

CSS:

#mymodal {
	background:#fff;
	color:#000;
	margin:0;
	position:fixed;
	top:-50%;
        left:50%;
        transform:translate(-50%,-50%);
	width:80%;
	border-radius:5px;
	box-shadow:0 3px 7px rgba(0,0,0,.25);
	-moz-box-shadow:0 3px 7px rgba(0,0,0,.25);
	-webkit-box-shadow:0 3px 7px rgba(0,0,0,.25);
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
/* Делаем появление модального окна при нажатии на ссылку с href="#mymodal" */
#mymodal:target {
	top:50%;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
        z-index: 9;
        box-shadow: 0 0 100px 25vw rgb(0 0 0 / 15%);
}
#mymodal header,#mymodal footer {
	background:#f7f7f7;
	border-bottom: 1px solid #e7e7e7;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
}
#mymodal footer {
	border:none;
	border-top: 1px solid #e7e7e7;
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
        text-align:right;
}
#mymodal section,#mymodal header, #mymodal footer {
	padding:15px;
	z-index:200;
}
#mymodal h2 {
	margin:0;
}

Посмотреть Демо