23.07.13, 11:50
0 комментарий
  Уроки

Создание эффектов модальных окон для сайта

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







Шаг 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”. Затем вы можете добавить еще один набор стилей для конкретного эффекта.

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

СКАЧАТЬ

Вес файла
50.12 Kb

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204