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

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

В наших примерах модальное окно будет появляется по щелчку мыши по кнопке, с использованием простого перехода (или анимации). Структура модального окно состоит из основной оболочки и содержания с кнопкой:

<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>Модальное окно</h3>
        <div>
            <p>Это модальное окно. Вы можете делать следующие вещи с ним:</p>
            <ul>
                <li><strong>Читать:</strong> модальные окна, обычно сообщают вам что-то важное, так что не забудьте прочитать, что на нем написано.</li>
                <li><strong>Смотреть:</strong> правда симпатично получилось?</li>
                <li><strong>Закрыть:</strong> кликните на кнопку ниже, чтобы закрыть окно.</li>
            </ul>
            <button class="md-close">Закрыть!</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: 20;
    visibility: hidden;
    backface-visibility: hidden;
    transform: translate(-50%б -50%);
}

.md-show {
    visibility: visible;
}

.md-overlay {
    position: fixed;
    visibility: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 19;
    opacity: 0;
    background: rgba(143,27,15,0.8);
    transition: all .4s;
}

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

Для некоторых эффектов мы также добавим класс для элемента HTML. Это нам нужно для создания некоторых 3D-эффектов для тега body и содержания. Обратите внимание: мы предполагаем, что все содержимое страницы (за исключением модального окна), расположено в контейнере:

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

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

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

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

/* 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-attribute, который содержит ссылку на модальное окно, которое мы хотим показать:

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

Для некоторых случаев, мы также добавим класс .md-setperspective для кнопки открытия окна.

С помощью JavaScript мы просто добавим класс .md-show к соответствующему модальному окну, когда мы нажимаем на кнопку, и, если это указано, класс .md-perspective для элемента HTML.

Чтобы экспериментировать с новыми эффектами, добавляйте новые кнопки и новые классы с эффектами, ссылаясь по ID в data-attribute data-modal. Затем вы можете добавить еще один набор стилей для этого конкретного эффекта.

Если вы хотите, чтобы эффект/переход происходил только когда модальное окно появляется, а не тогда когда оно исчезает, просто добавьте переход к .md-show.md-effect-x .md-content правилу (как мы это делали для некоторых примеров).

Для эффекта размытия фона мы используем Polyfilter от Christian Schaefer, для поддержки старых браузеров.

Надеюсь, вам понравилось эти примеры и это вдохновит вас на создание своих эффектов!