Простые модальные окна с помощью jQuery Простые модальные окна с помощью jQuery

 

На нашем блоге по веб-дизайну, мы уже не раз приводили примеры как можно создать красивые модальные окна с помощью различных приемов. Сегодня мы рассмотрим как это можно сделать с помощью маленького, но очень функционального плагина 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 });
});

 

Вот на этом и все, на самом деле все достаточно просто.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


🔖 Выбор по тегам ×

Top