От автора: набор экспериментальных эффектов появления модальных окон с помощью переходов и анимации CSS.
Сегодня мы хотим поделиться с вами идеями эффектов модальных окон. Они предлагают бесконечные возможности переходов появления диалоговых блоков, и мы хотели бы подсказать вам некоторые мысли о том, как показывать диалоги, и немного подстегнуть ваше воображение.
Идея состоит в необходимости кнопки запуска (или любого другого элемента), которая при щелчке заставит появиться модальное окно, применив простой переход (или анимацию).
Пожалуйста, обратите внимание: это работает должным образом только в браузерах, поддерживающих соответствующие свойства CSS. Только современные браузеры!
Многие знают о проблеме применения visibility/opacity в iOS < 6 Mobile Safari, так что в более старых устройствах они, возможно, не станут работать.
Структура модального окна состоит из основного упаковщика и раздела содержимого:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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, поэтому можно контролировать его внешний вид с помощью соседнего селектора того же уровня (сиблинга):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.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) обернуто в контейнер:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.md-perspective, .md-perspective body { height: 100%; overflow: hidden; } .md-perspective body { background: #222; perspective: 600px; } .container { background: #e74c3c; min-height: 100%; } |
Чтобы контролировать каждый эффект, мы используем дополнительный класс эффектов для определения того, какой именно переход нужен нам для отдельного модального окна. Пример индивидуального эффекта следующий:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* Эффект 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; } |
Кнопки запуска получат атрибут данных, содержащий ссылку на тот модальный блок, который нам нужно показать:
|
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
Источник: //tympanus.net/
Редакция: Команда webformyself.
Комментарии (2)