Всплывающее окно для сайта

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

Итак, как же создать простое всплывающее окно с затемненным задним фоном? Рассмотрим пример, в котором при клике на кнопку будет выводиться текст: "На лабутенах", в всплывающющем окне. Чтобы закрыть это окно надо будет нажать на крестик или на затемненный фон.

Вообщем для реализации этого примера не так много и нужно.

Пишем html код, по сути в нем будет только наша кнопка и окно с текстом, которое будет появляться при нажатие на кнопку.

	<input type="button" value="Узнать в какой она обуви" id="btn" />
	<div class="okno">
		<span class="close">X</span>
		На лабутенах
	</div>

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

<style>
#btn {
	display: block;
	margin: 10px;
	border: none;
	background: pink;
	padding: 10px;
	font-weight: bold;
	border-radius: 10px;
	cursor: pointer;
}
.okno{
	display:none;
	background: #fff;
	z-index: 2222;
	position: absolute;
	text-align: center;
	padding: 55px;
	width: 300px;
	left: 30%;
}
.fon{
	display: block;
	position: fixed;
	top: 0;
	background: #000;
	width: 100%;
	height: 100%;
	z-index: 222;
	opacity: 0.5;
	cursor: pointer;
}
.close{
	display: block;
	position: absolute;
	top: -10px;
	right: -10px;
	background: #fff;
	border-radius: 100%;
	padding: 10px;
	font-weight: bold;
	cursor: pointer;
}
</style>

После чего, необходимо написать скрипт который будет отвечать за открытие и закрытие всплывающего окна. Тут тоже на мой взгляд все просто, мы указываем изменение стилей формы ("display:block;") при клике на кнопку и создаем новый блок div, который является нашим задним фоном.

<script>
//появление и закрытие формы
$(document).ready(function () {
	$("#btn").click(function () {
		$(".okno").css("display","block");
		d = document.createElement('div');
		d.className='fon';
		document.body.appendChild(d);		
	});
	$(".fon,.close").click(function () {
		$(".okno").css("display","none");
		$('.fon').remove();
	});
});
</script>

Разберем подробнее наш скрипт:

В строчке $(".okno").css("display","block"); - открывается окно.

В строчке d = document.createElement('div'); - создается новый div элемент.

В строчке d.className='fon'; - присваивается класс созданному элементу.

В строчке document.body.appendChild(d); - вставляется элемент в наш html код.

Код который идет ниже этой строчки отвечает за закрытие и удаления div элемента с классом "fon".