22 июл 2013
Подборка эффектов модальных окон для сайта
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Подборка эффектов модальных окон для сайта

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Подборка эффектов модальных окон для сайта

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

Шаг 1. HTML
Для начала нам необходимо создать разметку модального окна, кроме этого у нас буду в диалоговом окне несколько кнопок:

<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>


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


Шаг 2. CSS
Теперь разберемся со стилями. У нас будет происходить наложение которое будет находиться после модального окна, таким образом, мы можем управлять появлением, используя смежный селектор:

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


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

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


Мы будем использовать javascript чтобы добавим класс “md-show” в соответствующее модальное окно, когда мы нажимаем на кнопку, передаем класс “md-perspective” HTML элементу.

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

Вот и все. Готово!



Скачивание файлов доступно только зарегистрированным пользователям









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.