Автор

Простые модальные окна с помощью 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 });
});

 

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

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

Всем известен youtube, весьма популярный сервис для просмотра и размещения созданного пользователями видео со всего мира в интернете. Недавно был обновлен интерфейс данного сервиса, в котором появилось много чего нового и интересного. В данном уроке мы рассмотрим как создать идентичные кнопки как на youtube. Такой дизайн кнопок очень выразителен и отлично работает. Состояние по умолчанию не бросается в глаза посетителя, соревнуясь за его внимание с другими достойными элементами интерфейса. Данные кнопки выражают функционал, в отличие от ссылок..


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

Таблица цен, которая анимируется в форме покупки, когда пользователь выбирает нужную услугу.


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

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


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

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


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close