WeberSoft

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

Достоинства

• идеально подходит для скрытого содержимого страницы
• имеет размер всего 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 });		
});