Контакты
Адрес: г. Ростов-на-Дону, Ворошиловский район, ул. Орбитальная 88/2.
Телефон: +7 (908) 172-0007
Email: s@trustcode.ru
Skype: trustcode.ru
Наша группа Вконтакте - vk.com/trustcodes

Политика конфиденциальности
Ваши персональные данные, в частности номер телефона и электронный почтовый адрес будут использоваться только в целях ответа на ваши вопросы и передачи коммерческих предложений по услугам компании «TRUST CODE». Просим обратить внимание, что мы не передаем данные 3м лицам.
Обратная связь




HC

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

Разрабатываем простое модальное (всплывающее) окно на CSS3 и HTML5. Данное всплывающее окно можно использоваться в самых различных целях, от простых текстовых окон, до всевозможных форм.

CSS код (разместите его в вашем файле стилей):
.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		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;
	}

	.modalDialog:target {
		display: block;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 400px;
		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 код (разместите его на любой странице вашего сайта):
Открыть модальное окно

X

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

Текст всплывающего окна

Данное всплывающее окно корректно отображается во всех браузерах, в том числе и на мобильных телефонах.
Демонстрация Исходник
Автор: Иван Цынтару
19.11.15, 20:59

0

4
588
Комментарии:
Добавить комментарий
Нам очень важно ваше мнение.
0

К сожалению комментариев пока нету((, Может ваш будет первым?
Добавить комментарий