Модальные окна с красивыми эффектами

demosourse

Сегодня мы хотим поделиться скриптами модальных окон с красивыми эффектами. Различных вариаций очень много, так что каждый сможет найти своё.

Идея в том, что модальное окошко нужно показать при клике на кнопку (элемент страницы); далее последует приятная анимация и собственно появляется окно.

На версиях iOS < 6 мобильной версии Safari, могут быть проблемы с отображением.

Структура модального окна делится на контейнер и контент:

<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> Modal windows will probably tell you something important so don't forget to read what it says.</li>
                <li><strong>Look:</strong> modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="md-close">Close me!</button>
        </div>
    </div>
</div>

...

<div class="md-overlay"></div>

Основной контейнер будет отображаться или скрываться (используя класс “md-show”), а внутренний контент будет анимироваться. Оформляем окна следующими селекторами:

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    backface-visibility: hidden;
    transform: translateX(-50%) translateY(-50%);
}

.md-show {
    visibility: visible;
}

.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(143,27,15,0.8);
    transition: all 0.3s;
}

.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}

Для некоторых эффектов добавим класс html элементам. В особенности для применения 3D эффектов. Заметьте это, что мы применяем всё это к всей странице и контенту:

.md-perspective,
.md-perspective body {
    height: 100%;
    overflow: hidden;
}

.md-perspective body  {
    background: #222;
    perspective: 600px;
}

.container {
    background: #e74c3c;
    min-height: 100%;
}

Для контроля различных эффектов, создадим специальные классы, ответственные за специфический эффект и анимацию. Пример индивидуального эффекта:

/* Effect 5: newspaper */
.md-show.md-effect-5 ~ .md-overlay {
    background: rgba(0,127,108,0.8);
}

.md-effect-5 .md-content {
    transform: scale(0) rotate(720deg);
    opacity: 0;
    transition: all 0.5s;
}

.md-show.md-effect-5 .md-content {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

У кнопок воспользуемся атрибутом data-* для того чтобы задать источник контента модального окна:

<button class="md-trigger" data-modal="modal-5">Newspaper</button>

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/
Перевел: Станислав Протасевич
Урок создан: 3 Июля 2013
Просмотров: 56126
Правила перепечатки

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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 4 Июля 2013 03:37
    tarantull565
    Класс
  • 4 Июля 2013 10:16
    julicious
    Круто, спасибо! Влюбилась Попробую скрипт на днях, если понравится, буду использовать на всех сайтах - вариантов множество, для каждого случая можно найти свой.
  • 4 Июля 2013 10:33
    Инь_Ян
    прелесть)
  • 4 Июля 2013 10:39
    Алексей Капшученко
    Безусловно классно!
  • 4 Июля 2013 10:44
    TOIIOP
    Круто. Даже в IE7 работает -)
    • 5 Июля 2013 14:12
      Barahten
      даже с эффектами?
    • 1 Ноября 2013 12:27
      wolfermeton
      как работает у меня нет
  • 4 Июля 2013 11:20
    viktor.lavrenko
    Офигенская штука!
  • 4 Июля 2013 17:42
    emil4eg
    Вот это действительно нужные скрипты. СПС!
  • 5 Июля 2013 00:00
    airarm
    Супер-Пупер.
  • 5 Июля 2013 22:11
    NotAfraid
    На высоте! :)
  • 7 Июля 2013 14:26
    pavlik290592
    Реально крутой скрипт. Стас, спасибо за перевод.
  • 11 Июля 2013 12:06
    otilla
    в Хроме работает с глюками. Идеально в Фаерфоксе.
    • 20 Июля 2013 22:20
      richard.hoffman.7374
      В Опере тоже с висаками... Ну, главное что работает.
  • 14 Июля 2013 18:00
    micha
    Актуально!
  • 31 Июля 2013 12:50
    Самуил Лембас
    Не понимаю, как оно работает. В исходниках полно скрипт-файлов. Куда их ложить? И пути к ним не прописаны в HTML и CSS.
    • 9 Августа 2013 22:57
      julicious
      Внизу страницы index.html они прописываются, перед </body>
  • 11 Августа 2013 14:36
    rymaruk
    Super)) Thank you))
  • 27 Августа 2013 08:44
    Fable
    Не работает в safari так что пользователи Mac отсекаются :(
  • 1 Ноября 2013 12:24
    wolfermeton
    у меня в IE7 не работает я думаю что из за этой строчках <script> // this is important for IEs var polyfilter_scriptpath = '/js/'; </script> может ктоо нибудь сталкивался, я проосто в коментах видел у когота работает или еще что? а так все круто)
  • 4 Ноября 2013 13:17
    Admon
    Все здорово, но работает странно. На странице три кнопки, по каждой кнопке должно открываться модальное окно, но открывается только по первой. По второй и третьей не открывается. Но если удалить первую кнопку, то открывается по второй. в чем может быть косяк?
    • 20 Ноября 2013 14:14
      beretaandbarats
      Такая же история, если создать чистый .html файл и вставить кнопки, то все работает. А вот в реальном проекте, где много div и вложений, перестает работать корректно.
  • 6 Ноября 2013 20:19
    ny_volk
    Аааа... Я хочу их)))
  • 17 Декабря 2013 02:10
    difoglia
    у меня вот такая вот ошибка http://joxi.ru/P3qvUhjKTJBgcbOFkyI движок uCoz, из-за чего это ?
  • 7 Января 2014 22:08
    A19021996
    Скажите пожалуйста, я поставил это модальное окно все работает идеально. Под номером 1 и 19. Но на одной странице добавил несколько штук первого номера и при нажатии на кнопку контент отображается один и тот же, почему? Как сделать что бы у каждой кнопки отображался разные присвоенные каждому данные?
  • 20 Июня 2014 16:07
    fuzytsfcrew
    Кто-нибудь знает, как остановить видео (YouTube IFRAME) при закрытии модального окна? Смена IFRAME на старый код с object не помогла. Удалось только остановить с помощью перезагрузки страницы при закрытии модального окна, но это не совсем то, что нужно. У кого какие мысли? 
    function removeModal( hasPerspective ) {
document.location.reload();
classie.remove( modal, ‘md-show’ );
if( hasPerspective ) {
classie.remove( document.documentElement, ‘md-perspective’ );
}
}
  • 16 Марта 2015 15:46
    Shichkin
    Народ, а может кто подсказать, как сделать так, чтобы модальное окно (любое из примера) открывалось при загрузке страницы и желательно с задержкой в секунд 5?
    • 1 Июля 2015 15:37
      myphp
      Мне тоже очень нужно. Чтобы не по нажатию всплывало.
    • 12 Ноября 2015 23:21
      gippen
      И мне очень, очень нужно!!!
  • 6 Марта 2016 15:35
    kelo
    Подскажите,пожалуйста,как вы реализовали возможность центрирования модального окна в видимой просматриваемой области. Если демо-страницу увеличить зумом (на смартфоне), то модальное окно центрируется именно в просматриваемой видимой области. У меня это не получилось никак сделать. Если зумишь страницу,чтобы нажать на кнопку модального окна (вёрстка у меня не адаптивная), то модальное окно появляется за пределами видимости. У вас это как-то предусмотрено,не могу понять,как именно.
^ Наверх ^