Тридцатый урок. Всплывающее окно на jQuery

При верстке лэндинга часто стоит задача создания всплывающего popup-окна. Его содержимое может быть самым разным, например форма или просто какая-то информация. Такое окно появляется при нажати на кнопку (или ссылку).

Одним из таких jQuery-плагинов является leanModal (к сожалению, сайт разработчика уже недоступен). Плагин использует два файла: jquery.leanModal.min.js и jquery.leanModal.css, которые я поместил в каталог assets.

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

Я сразу приведу готовый пример. Предполагаем, что jQuery уже подключена в секции HEAD.

Вот готовый код:

<div><a class="leanmodal button" href="#popup">Вызвать POPUP-окно</a></div>

<div id="popup" class="b-hide bg-green t-white pad20 w50 w90-tablet rounded">
	<p>Nulla velit. Donec ligula metus, placerat quis, blandit at.</p>
</div>

<script src="assets/js/jquery.leanModal.min.js"></script>

<script>
	$(document).ready(function(){
		$('.leanmodal').leanModal({
			'top': 100,
			'overlay': 0.5
		});
	});
</script>

Начнем с простого. Строчкой:

<script src="assets/js/jquery.leanModal.min.js"></script>

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

Блок $(document).ready(function() ..., как вы уже знаете, ждет пока страница будет полностью загружена и только после этого сработает код внутри.

Код

$('.leanmodal').leanModal({
	'top': 100,
	'overlay': 0.5
});

очень похож на код слайдера с прошлого урока. Фрагмент .leanmodal указывает класс к которому будет применена функция плагина (ссылка-кнопка). Параметр top задает верхний отступ всплывающего окна, а overlay задаёт уровень затенения остальной страницы.

Теперь перейдем к html-разметке. Ссылка-кнопка как раз имеет класс leanmodal, а атрибут href указывает на id-элемента (#popup), который будет содержать разметку окна. Так устроены связи в этом плагине.

Мы видим блок div#popup с разными UniCSS-классами. Особо стоит отметить b-hide, который по-умолчанию прячет блок на странице (display: none;). Нам же нужно, чтобы оно было видно только при нажатии на кнопку.

Как вы уже поняли, div#popup можно оформить произвольным образом под нужную задачу.

Задание

Задания доступны только после авторизации.