jQuery-плагин · модальные окна

arcticModal

Лёгкий плагин для jQuery, который делает модальные окна так, как надо: несколько окон одновременно, аккуратное центрирование, AJAX-загрузка и закрытие по Escape. Небольшая, но проверенная временем библиотека — оставляем её здесь для всех, кто ей пользуется.

v0.3
30 марта 2013
jQuery 1.9+
Бесплатно

Скачать 0.3 Быстрый старт

Возможности

Всё, что нужно для модальных окон

Несколько окон сразу

Одновременный показ нескольких модальных окон друг над другом со стеком слоёв.

Центрирование

Автоматическое выравнивание окна по центру — по вертикали и горизонтали.

AJAX-загрузка

Подгрузка содержимого по AJAX с визуализацией процесса загрузки.

Без «прыжка» страницы

Скрывает полосы прокрутки, чтобы страница не дёргалась при открытии окна.

Прокрутка контента

Если содержимое больше экрана — окно аккуратно прокручивается вместе с ним.

Удобное закрытие

Закрытие по клавише Escape, клику на оверлей или по кнопке в самом окне.

Быстрый старт

Три шага до первого окна

Подключите файлы

jQuery, скрипт и стили плагина, а также тему оформления.

HTML

<!-- jQuery -->
<script src="//yandex.st/jquery/1.9.1/jquery.min.js"></script>

<!-- arcticModal -->
<script src="js/arcticmodal/jquery.arcticmodal-0.3.min.js"></script>
<link rel="stylesheet" href="js/arcticmodal/jquery.arcticmodal-0.3.css">

<!-- Тема оформления -->
<link rel="stylesheet" href="js/arcticmodal/themes/simple.css">

Добавьте разметку окна

Спрячьте контейнер с окном — плагин покажет его сам.

HTML

<div style="display: none;">
  <div class="box-modal" id="exampleModal">
    <div class="box-modal_close arcticmodal-close">закрыть</div>
    Пример модального окна
  </div>
</div>

Инициализируйте плагин

Одна строка — и окно готово к работе.

$(function(){
  $('#exampleModal').arcticmodal();
});

Примеры

Готовые сценарии

Простое окно

Открыть заранее описанное в разметке окно по его id.

$('#exampleModal1').arcticmodal();

Своё содержимое

Собрать окно на лету из произвольного HTML и показать его.

var c = $('<div class="box-modal" />');
c.html($('.b-text').html());
c.prepend('<div class="box-modal_close arcticmodal-close">X</div>');

$.arcticmodal({
  content: c
});

Кастомный оверлей и ограничения

Запретить закрытие по Escape и клику, задать свой фон-оверлей.

$('#exampleModal3').arcticmodal({
  closeOnEsc: false,
  closeOnOverlayClick: false,
  overlay: {
    css: {
      backgroundColor: '#fff',
      backgroundImage: 'url(images/overlay.png)',
      backgroundRepeat: 'repeat',
      backgroundPosition: '50% 0',
      opacity: .75
    }
  }
});

Обработка событий

Колбэки жизненного цикла окна: до/после открытия и закрытия.

$('#exampleModal4').arcticmodal({
  beforeOpen: function(data, el) {
    alert('beforeOpen');
  },
  afterOpen: function(data, el) {
    alert('afterOpen');
  },
  beforeClose: function(data, el) {
    alert('beforeClose');
  },
  afterClose: function(data, el) {
    alert('afterClose');
  }
});

AJAX-загрузка

Подгрузить содержимое окна с сервера с колбэками загрузки.

$.arcticmodal({
  type: 'ajax',
  url: 'ajax/example.html.php',
  afterLoading: function(data, el) {
    alert('afterLoading');
  },
  afterLoadingOnShow: function(data, el) {
    alert('afterLoadingOnShow');
  }
});

AJAX + свой обработчик

POST-запрос за JSON и ручная сборка содержимого окна.

$.arcticmodal({
  type: 'ajax',
  url: 'ajax/example.json.php',
  ajax: {
    type: 'POST',
    cache: false,
    dataType: 'json',
    success: function(data, el, responce) {
      var h = $('<div class="box-modal">' +
          '<div class="box-modal_close arcticmodal-close">X</div>' +
          '<p><b /></p><p />' +
          '</div>');
      $('B', h).html(responce.title);
      $('P:last', h).html(responce.text);
      data.body.html(h);
    }
  }
});

Справочник

Параметры

Все опции передаются объектом в arcticmodal({ … }).

Основные

Параметр	По умолчанию	Описание
`type`	html	Тип содержимого. Поддерживаются два значения: `html` и `ajax`.
`content`	''	Содержимое модального окна. Используется при `type: html`.
`url`	''	URL для загрузки содержимого. Используется при `type: ajax`.
`ajax`	{}	Параметры AJAX-запроса (см. документацию jQuery). Отдельно обрабатываются `beforeSend`, `error` и `success`.
`closeOnEsc`	true	Закрывать окно при нажатии на Escape.
`closeOnOverlayClick`	true	Закрывать окно при клике на слой-оверлей.
`clone`	false	Клонировать окно для отображения (вызов jQuery-функции `clone(true)`).

Оверлей

Параметр	По умолчанию	Описание
`overlay.tpl`	<div class="arcticmodal-overlay"></div>	Шаблон блока-оверлея.
`overlay.css`	{ backgroundColor: '#000', opacity: .6 }	CSS-свойства блока-оверлея.

Анимация и ошибки

Параметр	По умолчанию	Описание
`openEffect.type`	fade	Тип анимации открытия: `fade` или `none`.
`openEffect.speed`	400	Скорость анимации открытия, мс.
`closeEffect.type`	fade	Тип анимации закрытия: `fade` или `none`.
`closeEffect.speed`	400	Скорость анимации закрытия, мс.
`errors.autoclose_delay`	2000	Автозакрытие окна при неудачном AJAX-запросе, мс.
`errors.ajax_unsuccessful_load`	Error	Текст сообщения о неудачном AJAX-запросе.

События

Колбэки жизненного цикла

beforeOpen Перед открытием окна.

afterOpen После отображения окна.

beforeClose Перед закрытием окна. Если вернуть false — закрытие отменяется.

afterClose После закрытия окна.

afterLoading После успешной AJAX-загрузки.

afterLoadingOnShow После отображения окна по завершении AJAX-загрузки.

errorLoading Ошибка AJAX-загрузки.

API

Управление окнами

Закрытие окон

По кнопке с классом, по id окна или всех окон сразу.

// Закрыть конкретное окно
$('#exampleModal').arcticmodal('close');

// Закрыть все открытые окна
$.arcticmodal('close');

// Кнопка внутри окна закрывает его по классу
// <div class="arcticmodal-close">закрыть</div>

Опции по умолчанию

Задать общие настройки для всех окон на странице.

$.arcticmodal('setDefault', {
  closeOnEsc: false,
  overlay: {
    css: { backgroundColor: '#0c1a2e', opacity: .7 }
  }
});

Версия 0.3 · 30 марта 2013. Библиотека распространяется свободно. Исходный код и обсуждение — на GitHub.
Готовый архив можно скачать (zip, 6 КБ).