Автор

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

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

Основная идея заключается в применении искажения или фильтры blob для кнопок и изучить некоторые творческие возможности. Все больше разработчиков используют SVG, что заставляет развивать данное направление. Мы хотели бы поделиться некоторыми идеями для воздействия на кнопки.


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

Какова цель таймера, для сайта? Когда мы ожидаем, какого то события, мы пытаемся найти способ показать пользователям, сколько времени осталось. Таймер дает чувство важности события, и если его связать с email полем ввода, то вы получите намного больше подписчиков на ваши новости.

Что мы ожидаем от jQuery таймера? Сегодня мы будем создавать jQuery плагин для отображения обратного отсчета времени. Он будет показывать оставшиеся дни, часы, минуты и секунды до начала события. Что же, начнем…


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

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


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

Если вы хотите объедение приятное с красивым на своем блоге то этот  урок станет вам весьма полезен. Мы рассмотрим процесс создания простого автоматического слайдера с прикрепленным к нему аккордеоном вкладок с плавным раскрытием и выводом дополнительной информации. Для этого мы будем использовать плагин Slidorion. Имеется несколько опций, которые дают возможность настроить время показа слайдов, эффекты переходов между слайдами и включить/выключить автоматическое проигрывание.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close