Анимированные модальные окна с animatedModal.js

demosourse

Предлагаем вам попробовать JS плагин animatedModal с помощью которого можно занимательным образом анимировать модальные окна.

Шаг 1. Подключение плагина в разделе head

<head>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>

Шаг 2. Размещение контента в теге body

<body>
    <!--Call your modal-->
    <a id="demo01" href="#animatedModal">DEMO01</a>

    <!--DEMO01-->
    <div id="animatedModal">
        <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID  class="close-animatedModal" -->
        <div class="close-animatedModal">
            CLOSE MODAL
        </div>

        <div class="modal-content">
                  <!--Your modal content goes here-->
        </div>
    </div>
</body>

Шаг 3. Подключение библиотек перед закрытием тега body

<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="yourPath/animatedModal.min.js"></script>
</body>

Шаг 4. Инициализация плагина

<script>
  $("#demo01").animatedModal();
</script>

Настройки

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://joaopereirawd.github.io/animatedModal.js/
Перевел: Станислав Протасевич
Урок создан: 6 Апреля 2015
Просмотров: 12799
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^