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

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

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

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
<a href="#modal">window</a> /* Кнопка вызова модального окна */ 
 
<aside id="modal">
	<header>
		<h2>Modal Heading</h2>
	</header>
	<section>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</section>
	<footer class="cf">
		<a href="#" class="btn">Close</a>
	</footer>
</aside>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#modal {
	background:#fff;
	left:50%;
	margin:-250px 0 0 -40%;
	position:absolute;
	top:-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;
}
	/* Make the modal appear when targeted */
	#modal: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;
	}
#modal header,#modal 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;
}
	#modal 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;
	}
#modal section,#modal header, #modal footer {
	padding:15px;
	z-index:200;
}
#modal h2 {
	margin:0;
}
#modal .btn {
	float:right;
}

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



Опубликовано 17.09.2015 в CSS3

(3) Комментариев

  1. Free Games Download
    Вторник Ноябрь 3rd, 2015 at 20:27 · Ответить

    Остается только вопрос а как этим модальным окном перекрыть вообще все, что отображается на текущей странице.

    • administrator
      Среда Ноябрь 4th, 2015 at 03:14 · Ответить

      поместить модельное окно в блок с фиксированной позицией, пример:

      Модальное окно

      и прописать :target уже для #overlay

  2. Stunt Maker
    Понедельник Январь 18th, 2016 at 09:28 · Ответить

    Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Back to Top