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

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

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

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

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

Комментарии:

  • Алекс:

    Привет!

    Слушай… помогите пожалуйста. Окошечки реально крутые, спасибо большое!

    Но можешь помочь ?

    Мне нужно чтобы такое вот окошко находилось в фиксированном блоке т.е ширина блока 300 х 400 и следовательно, нужно чтобы это окно было внутри этого блока. К примеру я хочу поставить кнопочку: Информация и нажав на эту кнопку, внутри этого блока откроется это окошечко. Можно ли это реализовать ? :(( Я уже замучался искать модальные окна((( Большинство из них с такими косяками, что потом жесть происходит при настройке под себя…

    Ответить
    • Алекс:

      Блин)) (Слушай… помогите пожалуйста. Окошечки реально крутые, спасибо большое!) — Тут опечатка)) От нервов уже не замечаю ошибок в грамматике))

      Ответить
    • Alexander:

      а если

      #animatedModal

      зафиксировать как нужно, где нужно и задать размеры, не получается?
      Если нет, завтра попробуем на кодопене сделать.

      Ответить
      • Алекс:

        Я на почту отправил письмо со скриншотом своего блока и HTML CSS разметкой и стилями. Надеюсь на помощь… я пытался, но у меня хрень получается…

        Ответить