На нашем блоге по веб-дизайну, мы уже не раз приводили примеры как можно создать красивые модальные окна с помощью различных приемов. Сегодня мы рассмотрим как это можно сделать с помощью маленького, но очень функционального плагина leanModal, этот маленький плагин имеет минимальные настройки, по этому им легко пользоваться. Плагин не использует никаких изображений и отлично подходит для вывода форм регистрации или панелей сообщений.
Однако он не поддерживает работы с изображениями и не может использоваться при организации галерей. Такой недостаток является компенсацией за маленький размер кода - всего 780 байт. Высота и ширина модального окна автоматически устанавливается в соответствии с содержанием. Также плагин поддерживает вывод нескольких модальных окон для одной страницы.
Для начала подключаем скрипты, вместе с библиотекой JQuery включаем jquery.leanModal.min.js в раздел заголовка страницы:
<script type="text/javascript" src="путь_к/jquery.leanModal.min.js"></script>
Затем просто добавьте в свой файл CSS стиль для перекрывающего блока. Также нужно скрыть элементы модального окна с помощью правила 'display: none;'
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
Теперь нам необходимо вызвать функцию для запуска модального окна. Нужно установить атрибут href запускающей ссылки так, чтобы он соответствовал атрибуту id целевого элемента для модального окна.
$(function() {
$("#trigger_id").leanModal();
});
...или, если у вас больше одного модального окна на странице, просто добавьте одинаковый атрибут 'rel' к запускающим ссылкам и вызовите функцию с использованием атрибута:
$(function() {
$("a[rel*=leanModal]").leanModal();
});
В целях упрощения плагина имеются только две опции: вертикальная позиция модального окна по отношению к документу (по умолчанию, 100px от верха), и прозрачность перекрывающего слоя(по умолчанию 0.5). Вы можете изменить данные значения, передав свои собственные величины при вызове функции:
$(function() {
$("#trigger_id").leanModal({ top : 200, overlay : 0.4 });
});
Вот на этом и все, на самом деле все достаточно просто.
Материал взят из зарубежного источника - http://www.webresourcesdepot.com/leanmodal-a-micro-jquery-modal-plugin/ и представлен исключительно в ознакомительных целях.