Веб-дизайнеру
Веб-разработчику
Дополнительно
Модальное окно JQuery & CSS3 + 22 эффекта появления!
Скачать
Демо
↓ Также Вам будет интересно ↓
Сегодня мы рассмотрим 22 супер классных эффекта открытия модального окна. Модальное окно очень полезная вещь, так как помогает по крайней мере в 2-х отношениях: снижает нагрузку на сайт (Вам не нужно открывать например, форму регистрации или входа, в новом окне, заново грузить весь контент), а просто откроется окошко. Также это удобно и быстро для пользователя. В модальном окне можно разметить все, что пожелаете, вплоть до рекламы (но без фанатизма 
).
Есть бесконечно много способов открытия модальных окон (мы будем говорить больше об эффектах открытия окна). Но сейчас хотелось бы поделиться с Вами некоторыми идеями, эффектами которые могут Вам понравиться или вдохновить на создание своих. Например, 2 других эффекта CSS Scale Transform смотрите здесь.
Идея состоит в том, чтобы иметь кнопку (или любой другой элемент блок, ссылка…), при нажатии на которое открывается модальное окно, с креативным эффектом анимации на JQuery и CSS3.
Есть кто знает, есть некоторые проблема с использованием свойств visibility / opacity для IOS < 6 Mobile Safari, так что скорее всего, это не будет работать на старых устройствах.
HTML разметка
Структура модального окно состоит из основной обертки md-modal + других дополнительных классов и id, в зависимости от эффекта. Класс md-content включает все, что будет показано в окне, поэтому сюда Вы можете добавлять то, что Вам нужно (текст, изображение, форму, контакты…).
|
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>Модальное окно</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> |
Все просто, в исходниках есть имена классов и id, добавляя которые к элементу или кнопке, и при нажатии Вы получите эффект появления модального окна.
CSS
Основные стили для всех окон (каждое модальное окно имеет класс .md-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; } |
Для некоторых эффектов мы также добавим класс md-setperspective. Это необходимо для создания некоторых 3D эффектов, и применить их к body и контенту. Обратите внимание – мы предполагаем, что все содержимое страницы (за исключением модальных и обертки), завернуты в контейнере с классом container:
|
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; } |
Все кнопки имеют атрибут data, который содержит ссылку на вид модального окна, на вид желаемого эффекта:
|
1 |
<button class="md-trigger" data-modal="modal-5">Газета</button> |
В некоторых случаях, мы также добавим класс md-setperspective для кнопки.
С помощью JavaScript мы добавляем класс md-show к соответствующему окну, когда мы нажимаем на кнопку, и, если указан класс md-perspective.
Экспериментируйте с новыми эффектами, добавляя новые кнопки и новые классы со стилями эффекта, а также меняя ID в данных атрибута data-modal. Затем вы можете добавить еще один набор стилей для этого конкретного эффекта.
Если вы только хотите, чтобы эффект transition анимации был только при появлении модального окна, но не тогда, когда оно исчезает, просто добавьте переход в .md-show.md-effect-x .md-content (как мы это делали для некоторых примеров).
Для эффекта размытия фона мы используем для поддержки старых браузеров.
Надеюсь, вам понравились эти маленькие идеи эффекта! Используйте, создавайте модальные окна и улучшайте свой сайт!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
http://www.just4life.com.ua/
Кто-нибудь знает, как остановить видео (YouTube IFRAME) при закрытии модального окна?
Смена IFRAME на старый код с object не помогла.
Удалось только остановить с помощью перезагрузки страницы при закрытии модального окна, но это не совсем то, что нужно.
У кого какие мысли?
function removeModal( hasPerspective ) {
document.location.reload();
classie.remove( modal, ‘md-show’ );
if( hasPerspective ) {
classie.remove( document.documentElement, ‘md-perspective’ );
}
}