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

8 сентября 2014 Антон Кулешов 1015 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
Читайте далее

Простой прогресс бар загрузки страницы

8 января 2016 Антон Кулешов

Создавая веб-приложение, не важно, какого уровня: будет ли это обычный веб-сайт или сервис, который принимает массу параметров и обрабатывает их на сервере – хорошей практикой является добавление прогресс бара (progress bar), за анимацией которого можно спрятать все времязатратные части нашего приложения.

Разбираемся, как сделать бегущую строку на сайте

21 января 2015 Антон Кулешов

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

Аутентификация через «ВКонтакте»

2 декабря 2014 Антон Кулешов

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