Lecaw

Учимся создавать Web-сайты

Эффекты модальных окон

June 26, 2013
CSS
828hits

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

ДЕМО Исходные файлы

 

Идея состоит в том, чтобы создать кнопку запуска (или любой другой элемент), щелчком по которому будет появляться модальное окно, используя простой переход (или анимацию).

Многие знают, что на данный момент существует проблема с использованием visibility/opacity для IOS < 6 Mobile 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”), а также у внутреннего содержания будет определенный переход. наложение будет находиться после модального окна(s), таким образом, мы можем управлять появлением, используя смежный одноуровневый селектор:

.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%;
}

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

/* Эффект 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 эффекта, ссылаясь к данному ID в data-attribute “data-modal”. Затем вы можете добавить еще один набор стилей для конкретного эффекта.

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

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

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(3 голосов)

Оставить комментарий