leanModal модальные диалоговые окна

Очень простой плагин, который работает с вашим CSS

leanmodal

Достоинства

  • идеально подходит для скрытого содержимого страницы
  • имеет размер всего 780 байт (в минифицрованном виде)
  • имеют гибкую настройку ширины и высоты
  • без использования изображений
  • поддерживает несколько копий на одной странице
  • отлично подходит для входа в систему, регистрация и окон сообщений и т.д.

Недостатки

  • нет поддержки галереи, IFRAME и AJAX
  • не проверен в IE6.

Как использовать

Шаг 1: вместе с библиотекой JQuery включаем jquery.leanModal.min.js в раздел заголовка страницы:

<script type="text/javascript" src="путь_к/jquery.leanModal.min.js"></script>

Шаг 2: просто добавьте в свой файл CSS стиль для перекрывающего блока. Также нужно скрыть элементы модального окна с помощью правила ‘display: none;’.

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

Шаг 3: вызовите функцию для запуска модального окна. Нужно установить атрибут href запускающей ссылки так, чтобы он соответствовал атрибуту id целевого элемента для модального окна.

$(function() {
    $("#trigger_id").leanModal();		
});

..или, если у вас больше одного модального окна на странице, просто добавьте одинаковый атрибут ‘rel’ к запускающим ссылкам и вызовите функцию с использованием атрибута:

$(function() {
    $("a[rel*=leanModal]").leanModal();		
});

Опции

В целях упрощения плагина имеются только две опции: вертикальная позиция модального окна по отношению к документу (по умолчанию, 100px от верха), и прозрачность перекрывающего слоя(по умолчанию 0.5). Вы можете изменить данные значения, передав свои собственные величины при вызове функции:

$(function() {
    $("#trigger_id").leanModal({ top : 200, overlay : 0.4 });		
});

Комментарии: