Всплывающие окна на jQuery за 3 минуты

8 сентября 2014 Антон Кулешов 1097 0

Сегодня я расскажу о том, как сделать всплывающие окна на jQuery потратив на это 3 минуты своего времени. Данное решение будет включать в себя минимум кода.

Реклама

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

Давайте приступим и для начала подключим библиотеку и файл, в котором будет находиться скрипт всплывающих окон. Так же для удобства вынесем стили в отдельный CSS файл:

<link href="main.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="lightbox.js" type="text/javascript"></script>

Добавим на страницу HTML структуру:

<!-- Кнопка для вызова -->
<span class="button lightbox">
	Нажми на меня
</span>
<!-- Вызываемый блок -->
<div id="block">
	<div class="close"></div>
	<p>Контент</p>
</div>

Теперь в CSS файле пропишем стили для кнопки и вызываемого блока:

body{
	background-color: #d8d5d4;
}
#block{
	width: 300px;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -140px;
	border: 8px solid #D74745;
	background-color: #E7E7E7;
	border-radius: 9px;
	text-align: center;
	position: fixed;
	display: none;
	z-index: 9999;
}
.close{
	background: url(close.png) no-repeat center center;
	opacity: 0.5;
	height: 12px;
	width: 12px;
	opacity: 0.5;
	right: 7px;
	top: 5px;
	position: absolute;
	cursor: pointer;
}
	.close:hover{
		opacity: 1;
	}
.button{
	cursor: pointer;
	text-decoration: none;
	background-color: #fff;
	border-radius: 25px;
	font: bold 50px Verdana;
	color: #000;
	letter-spacing: 10px;
	padding: 5px 10px;
	text-align: center;
	border: 5px solid rgba(255, 0, 0, 0.6);
	box-shadow: 0 0 30px rgba(24, 124, 204, 0.8),
				1px 1px 1px rgba(0, 0, 0, 0.5) inset;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	width: 600px;
	display: block;
	margin: 100px auto 0;
}
	.button:hover{
		box-shadow: none;
	}

После того, как мы закончили с подготовкой, у нас получилась стилизованная кнопка и блок, в который можно, в дальнейшем, поместить форму обратной связи, подсказку, кусок контента и прочее.

Осталось написать jQuery код. Выглядеть он будет так:

$(function(){

	var block = $("#block");

	$(".lightbox").on("click", function(){

		$("<div id='overlay'></div>")
			.css({
				"height": "100%",
				"position":"fixed",
				"width": "100%",
				"background": "#000",
				"opacity": "0",
				"top": "0",
				"left": "0",
				"z-index": "999"
			})
			.animate({"opacity": "0.5"}, "slow")
			.appendTo("body");

		block.fadeIn();

		$("#overlay, .close").on("click", function(){
			block.fadeOut("slow");
			$("#overlay").fadeOut("slow", function(){
				$(this).remove();
			});
		});
	});
});

Скрипт можно разделить на логические части. Нажимая на кнопку с классом lightbox, через код мы добавляем задний фон, причем стили к нему прописываем «на лету», далее показываем сам блок, сохранённый в переменной block. Вторая часть - это обработка событий закрытия при нажатии на задний фон и на див с классом close. Вначале мы прячем блок, а затем скрываем сам фон, после чего - удаляем его.

В принципе всё довольно просто и должно быть понятно.

Реклама
Комментариев еще не оставлено
no_avatar