leanModal модальные диалоговые окна
Очень простой плагин, который работает с вашим 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 }); });
Комментарии: