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

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 кнопки закрытия из примеров:

Похожее модальное окно, но без использования jQuery и плагинов можно посмотреть в заметке: Простое модальное окно на JS

Автор: Joao Pereira

animatedModal.js на github

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

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

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

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

  • Кэт:

    Привет! Прекрасный плагин, но реально ли снять с него зависимость от Jquery и сделать чтобы работало на Vanilla JS ?

    Ответить
    • Alexander:

      В этом случае, наверное, проще вообще без плагинов.
      Делаем полноэкранное окно, а по клику показываем его с нужным эффектом из animate.css
      И соотв. также при закрытии

      Ответить
      • Кэт:

        Я понимаю это может быть тяжело… но не сможешь показать готовый пример ? Я не соображу как без плагина…

        Ответить
        • Alexander:

          Если время будет, накидаю сегодня статейку

          Ответить
        • Alexander:

          По вашим заявкам 🙂
          https://atuin.ru/blog/prostoe-modalnoe-okno-na-js/

          Ответить
          • Кэт:

            Спасибо огромное!!! Ты очень сильно помог. Я чуток допилила твою реализацию, позже выложу на Codpen и поделюсь. Может тоже будет полезно…))

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

    Привет!

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

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

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

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

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

      Ответить
    • Alexander:

      а если

      #animatedModal

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

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

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

        Ответить