В данном уроке мы рассмотрим замечательную подборку эффектов для модальных окон. Все они имеют плавность эффекта и не требуют особых умений интеграции, все достаточно просто. Есть огромное количество вариантов появления диалогового окна, и мы бы хотели продемонстрировать некоторые идеи о том, как отображать диалоговые окна.
Шаг 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%;
}