Responsive jQuery Modal & Dialog Popups with CSS3 Animations

Описание

Плагин для реализации всплывающих диалогов, сообщений и т.п. с красивыми анимациями появления на CSS3, и с минимальным количеством javascript и css кода. Идея взята из этой статьи. В отличие от оригинала, оставлены только 2D эффекты и устранено "замыливание" в webkit-бразерах.

Является основой для всплывающих диалогов $.dialog и галереи изображений $.gallery.

Требует jQuery 1.7+

Подключение

Для использования плагина подключите скрипт в любом месте страницы, после подключения библиотеки jQuery. Также, обязательно должны быть подключены стили из файла jquery.popup.css или jquery.popup.min.css, так как именно в них описывается позиционирование диалогов.

<link rel="stylesheet" href="path/to/script/jquery.popup.min.css" /> <script src="path/to/script/jquery.popup.min.js"></script>

Примеры

Демо-страница плагина $.popup:

http://konstantin-kachurenko.github.io/jquery-popup/#example

Демо-страница плагина $.dialog, расширяющего данный:

http://konstantin-kachurenko.github.io/jquery-popup-dialog/#examples

Параметры инициализации

Boolean modal = false

Модальный режим, в котором клик по подложке блока не закрывает его.

Boolean bubble = true

"Всплывание" блока вверх по дереву документа. При инициализации с этим параметром, установленным в true, блок будет перемещен в конец <body>, не зависимо от того, где он был изначально.

Function open = Null

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

Function close = Null

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

Function realign = Null

Функция, вызываемая перед установкой свойств margin-left и margin-top при позиционировании блока.

API

При инициализации плагина, объект $.popup сохраняется в .data('popup') у каждого из блоков, попавшего в исходный набор. Этот объект предоставляет управление копией плагина и имеет следующий набор свойств методов:

Свойства

jQuery $popup

Всплывающий блок

jQuery $overlay

Подложка всплывающего блока

Методы

$.popup config([Object params])

Расширяет набор параметров инициализации, добавляя из объекта Object params новые параметры и перезаписывая уже существующие.

$.popup open()

Показывает всплывающий блок и его подложку.

$.popup overlay()

Показывает только подложку. После вызова этого метода, сам блок по прежнему может быть отображен с помощью метода open()

$.popup close([Number delay])

Скрывает всплывающий блок. Если числовой параметр delay передан и больше 0, закрытие будет отсрочено на переданное количество микросекунд.

$.popup realign()

Позиционирует блок так же, как при показе или изменении размеров окна. Полезен при динамическом наполнении блока.

jQuery destroy()

Уничтожает копию плагина, возвращая исходный блок.