При верстке лэндинга часто стоит задача создания всплывающего popup-окна. Его содержимое может быть самым разным, например форма или просто какая-то информация. Такое окно появляется при нажати на кнопку (или ссылку).
Одним из таких jQuery-плагинов является leanModal (к сожалению, сайт разработчика уже недоступен). Плагин использует два файла: jquery.leanModal.min.js и jquery.leanModal.css, которые я поместил в каталог assets.
Сам плагин очень простой и я покажу как его можно использовать. В будущем вы будете встречать и другие плагины, так что этот не единственный. :-)
Я сразу приведу готовый пример. Предполагаем, что jQuery уже подключена в секции HEAD.
Ut magna. Nullam a nisl. Sed consectetuer sodales justo. Integer iaculis pharetra eros. Morbi blandit mollis magna. Etiam ornare fermentum felis. Aenean quam mauris, vehicula non, suscipit at, venenatis sed arcu. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac ante. Quisque congue ultricies neque. Aliquam congue pede a.
Вот готовый код:
<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 можно оформить произвольным образом под нужную задачу.
Задания доступны только после авторизации.