Анимированные полноэкранные модальные окна

animatedModal.js — это легкий плагин jQuery для создания полноэкранного модального окна с использованием CSS3 переходов. Эффекты открытия и закрытия окна берутся из набора animate.css.

Примеры:

Демо 1

animatedIn: 'zoomIn',
animatedOut: 'bounceOut'

Демо 2

animatedIn: lightSpeedIn
animatedOut: bounceOutDown

Демо 3

animatedIn: bounceIn
animatedOut: bounceOut

Установка:

Добавляем на сайт стили animate.css, подробнее об этой библиотеке:

Добавляем на страницу модальное окно и ссылку для его открытия:

Это важно: чтобы закрыть окно, имя класса должно соответствовать имени, указанному в ID с префиксом close-

Добавляем библиотеку jQuery и скрипт animatedModal:

И подключаем:

Или с настройками, как в первом примере:

Настройки:

Название По умолчанию Возможные значения Описание
color #39BEB9 HEX, HSL, RGB, RBA Цвет фона модального окна
animatedIn zoomIn Подробнее тут Эффект, когда окно открывается
animatedOut zoomOut Подробнее тут Эффект, когда окно закрывается
animationDuration .6s seconds Продолжительность анимации
overflow auto scroll; hidden; auto; Убирать прокрутку страницы или нет

Функции обратного вызова:

beforeOpen: function() {}

afterOpen: function() {}

beforeClose: function() {}

afterClose: function() {}

HTML и CSS кнопки закрытия из примеров:

Автор: Joao Pereira

animatedModal.js на github

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!