Стильные эффекты модальных окон

Стильные эффекты модальных окон

От автора: набор экспериментальных эффектов появления модальных окон с помощью переходов и анимации CSS.

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

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

Пожалуйста, обратите внимание: это работает должным образом только в браузерах, поддерживающих соответствующие свойства CSS. Только современные браузеры!

скачать исходникидемо


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Многие знают о проблеме применения 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>

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

.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-эффекта для body и контента. Заметьте, что мы полагаем, что все содержимое страницы (за исключением modal и overlay) обернуто в контейнер:

.md-perspective,
.md-perspective body {
 height: 100%;
 overflow: hidden;
}
 
.md-perspective body  {
 background: #222;
 perspective: 600px;
}
 
.container {
 background: #e74c3c;
 min-height: 100%;
}

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

/* Эффект 5: газета */
.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;
}

Кнопки запуска получат атрибут данных, содержащий ссылку на тот модальный блок, который нам нужно показать:

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

Для отдельных случаев с перспективой, кроме того, добавим кнопке запуска класс “md-setperspective”.
С помощью JavaScript’а при щелчке по кнопке просто добавляем соответствующему модальному окну с перспективой класс “md-show”, и, если обозначено, класс “md-perspective” для элемента html.

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

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

Надеюсь, вам понравятся эти маленькие идеи, и окажутся для вас источником вдохновения!

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Александр

    Вот тоже хороший ресурс getbootstrap.com

  2. Серега

    Уважаемые, подскажите пожалуйста, необходимо вывести отдельный php/html файл на определенную страницу сайта в виде мод. окна. Как такое можна реализовать, день пропарился — бред выходит, запутался уже…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree