Гибкий плагин модального окна на jQuery

6.04.14 26.01.15 Нет 5968

Пользовательская анимация и позиционирование. Внешний вид настраивается по желанию – никаких предустановленных стилей. Удобный и простой в установке и использовании. Лицензия – MIT.

Пример использования:

Между <head></head>:

<!-- вставка плагина сразу после подключения jQuery -->
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- Добавить облегчающий (easing) плагин jQuery - если будут использоваться его возможности  -->
<script src="jquery.easing-1.3.min.js" type="text/javascript"></script>
<script src="modal.js" type="text/javascript"></script>

Между <body></body>:

<!-- переключающий элемент -->
<button class="viewModal">Click Me</button>

<!-- модальный элемент -->
<div id="modal" style="display:none;width:50%;...">
Контент модального окна со своим стилем
</div>

<script type="text/javascript">
$(function(){
$('.viewModal').modal({
target : '#modal',
animation : 'top',
position : 'center'
});
});
</script>

⇥ Пользовательские глобальные настройки:

Эти настройки относятся к каждому модальному окну, и если нужно переопределить эти глобальные настройки для всех окон, то добавьте опции этих настроек в $(document) element , т.е.: $(document).modal({ options .. })

target :    селектор/объект jQuery модального элемента ('#modal')
on :     событие запуска модального окна ('click', 'mouseenter', ...)
close :    селектор закрытия ('.closeModal')
escapeClose :    закрытие модального окна по кнопке ESC (по умолчанию: true)
speed :    длительность появления (по умолчанию: 500)
easing :    jQuery Easing настройки (по умолчанию: linear), требуется подключение easing скрипта
position :    позиция модального окна, может быть установлена как 'center' для центрального положения или 'bottom' – для показа внизу, также может быть установлена в top и left позиции как '10px auto', 'auto 100px', ’10% 10%', …
animation :    направление анимации – принимает следующие значения:

zoom :    zoom эффект от клика до занятия окончательной позиции
left :    слева до занятия окончательной позиции
right :    справа до занятия окончательной позиции
bottom :    снизу до занятия окончательной позиции
top :    сверху до занятия окончательной позиции

overlayClose :     установите в false, если не нужно закрытие по клику вне модального окна (по умолчанию true)
overlayColor :    цвет оверлейного (затемняющего) элемента (по умолчанию black)
overlayOpacity :    прозрачность затемнения (по умолчанию 0.6)
complete :    функция обратного вызова для окончательной позиции

Примеры:

//установка глобальных настроек
$(document).modal({
easing : 'easeInOutBounce',
speed : 600,
animation : 'top',
position 'center',
overlayClose : true,
on : 'click'
});

// для конкретного модального окна используются глобальные настройки
$('.clickMe').modal({
target : '#modal1'
});

//перегружаем глобальные настройки новыми значениями для  конкретного модального окна
$('.mouseover').modal({
target : '#modal2',
animation : 'zoom',
position : '10px auto', //top 10px left auto
easing : 'easeOutElastic',
on : 'mouseenter',
overlayClose : false,
overlayColor : 'red',
overlayOpacity : 0.5,
close : '.closeMe'
});

⇥ Параметры запуска/переключения:

view : показать окно $('#modal').modal('view',{ options .. })
close : закрыть $('#modal').modal('close')

Примеры:

//переключатель на показ
$('.someElement').click(function(){
$('#modal').modal('view',{
easing : 'linear',
position : 'bottom',
animation : 'top left',
speed : 1000
});
});

//переключатель на закрытие
$('.someOtherElement').click(function(){
$('#modal').modal('close');
});

Источник

Смотреть пример ⇥ одно окно

Смотреть пример ⇥ несколько окон

Смотреть пример ⇥ перезагрузка глобальных опций для нескольких окон

Скачать исходник Размер: 45,29kB | Изменен: 6.04.14 | Загрузок: 207