Автор

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

 

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

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


vk.com/club.ssdru

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


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

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

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


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

И снова параллакс на jQuery, но довольно-таки интересный вариант и я думаю многие захотят на своем сайте иметь чтото подобное, так как практически это многослойный параллакс эффект, просто посмотрите демо и всё станет ясно!


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close