Все для веб-дизайнера
Простые модальные окна с помощью jQuery
На нашем блоге по веб-дизайну, мы уже не раз приводили примеры как можно создать красивые модальные окна с помощью различных приемов. Сегодня мы рассмотрим как это можно сделать с помощью маленького, но очень функционального плагина leanModal, этот маленький плагин имеет минимальные настройки, по этому им легко пользоваться. Плагин не использует никаких изображений и отлично подходит для вывода форм регистрации или панелей сообщений.
Однако он не поддерживает работы с изображениями и не может использоваться при организации галерей. Такой недостаток является компенсацией за маленький размер кода — всего 780 байт. Высота и ширина модального окна автоматически устанавливается в соответствии с содержанием. Также плагин поддерживает вывод нескольких модальных окон для одной страницы.
Для начала подключаем скрипты, вместе с библиотекой JQuery включаем jquery.leanModal.min.js в раздел заголовка страницы:
|
1 |
<script type="text/javascript" src="путь_к/jquery.leanModal.min.js"></script> |
Затем просто добавьте в свой файл CSS стиль для перекрывающего блока. Также нужно скрыть элементы модального окна с помощью правила ‘display: none;’
|
1 2 3 4 5 6 7 8 9 10 |
#lean_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none; } |
Теперь нам необходимо вызвать функцию для запуска модального окна. Нужно установить атрибут href запускающей ссылки так, чтобы он соответствовал атрибуту id целевого элемента для модального окна.
|
1 2 3 |
$(function() { $("#trigger_id").leanModal(); }); |
…или, если у вас больше одного модального окна на странице, просто добавьте одинаковый атрибут ‘rel’ к запускающим ссылкам и вызовите функцию с использованием атрибута:
|
1 2 3 |
$(function() { $("a[rel*=leanModal]").leanModal(); }); |
В целях упрощения плагина имеются только две опции: вертикальная позиция модального окна по отношению к документу (по умолчанию, 100px от верха), и прозрачность перекрывающего слоя(по умолчанию 0.5). Вы можете изменить данные значения, передав свои собственные величины при вызове функции:
|
1 2 3 |
$(function() { $("#trigger_id").leanModal({ top : 200, overlay : 0.4 }); }); |
Вот на этом и все, на самом деле все достаточно просто. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Интересно:
| Print article | Опубликовал admin 19.11.2011 в 20:22, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...