Всплывающее окно на сайт javascript\jQuery

Речь пойдет не о надоедливых всплывающих popup окнах в браузере, которые навязывают какую-то рекламу, а о вплывающих окнах, которые предназначены для заполнения форм.

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

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

Давайте рассмотрим его в деле:

Html код нашей формы для заполнения

	<div class="popup-window">	//форма для заполнения
		<p class="close">x</p>	
		<table>
			<tr>
				<td>
					Имя:
				</td>
				<td>
					<input type="text"/>
				</td>
			</tr>
			<tr>
				<td>
					E-mail:
				</td>
				<td>
					<input type="text"/>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="submit"/>
				</td>
			</tr>
		</table>
	</div>
	

Кнопка, при нажатии на которую открывает всплывающее окно:

	<p class="open">Открыть всплывающее окно</p>
	

Блок с тенью(вспомнился фильм "бой с тенью"):

	<div class="backpopup"></div>
	

Присваиваем стили для наших блоков(комментарии в коде):

	<style type="text/css">
		.popup-window{	//форма для заполнения
			display: none;
			box-shadow: 0px 0px 4px 0px rgb(70, 70, 70);
			-webkit-box-shadow: 0px 0px 4px 0px rgb(70, 70, 70);
			-moz-box-shadow: 0px 0px 4px 0px rgb(70, 70, 70);
			padding: 20px;
			background: white;
			z-index: 500;
			-webkit-border-radius: 5px!important;
			-moz-border-radius: 5px!important;
			border-radius: 5px!important;
		}
		.open{ 	//кнопка-ссылка 
			text-decoration: underline;
			cursor: pointer;
		}
		.backpopup{		//тень
			display:none;
			width: 100%;
			height: 100%;
			position: fixed;
			background: rgb(105, 105, 105);
			opacity: 0.7;
			top: 0;
			left: 0;
			z-index: 400;
			cursor: pointer;
		}
		.close{		//кнопка закрытия окна
			float: right;
			cursor: pointer;
			right: 5px;
			top: 0px;
			position: absolute;
			padding: 4px;
		}
	</style>
	

И самый ценный код для работы нашей фичи:

	<script type="text/javascript">
		$.fn.popup = function() { 	//функция для открытия всплывающего окна:
			this.css('position', 'absolute').fadeIn();	//задаем абсолютное позиционирование и эффект открытия
			//махинации с положением сверху:учитывается высота самого блока, экрана и позиции на странице:
			this.css('top', ($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px');
			//слева задается отступ, учитывается ширина самого блока и половина ширины экрана
			this.css('left', ($(window).width() - this.width()) / 2  + 'px');
			//открываем тень с эффектом:
			$('.backpopup').fadeIn();
		}
		$(document).ready(function(){	//при загрузке страницы:
			$('.open').click(function(){	//событие клик на нашу ссылку
				$('.popup-window').popup();	//запускаем функцию на наш блок с формой
			});
			$('.backpopup,.close').click(function(){ //событие клик на тень и крестик - закрываем окно и тень:
				$('.popup-window').fadeOut();
				$('.backpopup').fadeOut();
			});
		});
	</script>
	

Примерно так основана работа всплывающих окон на сайтах.

Смотреть демо

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

<script type="text/javascript">
	$(document).ready(function(){	//при загрузке страницы:
		$('.popup-window').popup();	//открыть всплывающее окно при загрузке сайта
	});
</script>