Показать Меню
falbar Модальное окно

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

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

Сегодня я расскажу о том, как сделать всплывающие окна на 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. Вначале мы прячем блок, а затем скрываем сам фон, после чего - удаляем его.

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

Подписаться на обновления

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