Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » 19 эффектов появление модального окна
19 эффектов появление модального окна
AndreyДата: Понедельник, 09.12.2013, 17:32:05 | Сообщение # 1
Технарь
Offline
3

Просто классные модальные окна и 19-ть. эффектов их появления

Смотрим Демо

Качаем прикреплённы ниже архив и заливаем к себе на хост два файла

Подключаем перед закрывающим тегом </body> два скачанных JS:
Код
<script src="/js/classie.js"></script>    
<script src="/js/modalEffects.js"></script>


Теперь также перед закрывающим тегом </body> ставим каркас нашего окна:
Код
<div class="md-modal md-effect-1" id="modal-1">    
     <div class="md-content">    
     <h3>Заголовок окна</h3>    
     <div>     
     <p>Привет я Модальное окно, сюда можно поместить нужную для тебя и твоих пользователей информацию, к примеру форму входа, все rss подписки сайта и т.д</p>    
     <button class="md-close">Закрыть</button>    
     </div>    
     </div>    
     </div>  

обратите внимание, что в данном коде следует прописать номер модельного окна и его эффект появление:

class="md-modal md-effect-1" id="modal-1"

md-effect-1 - номер эффекта появление окна
modal-1 - номер окна привязанный к кнопке

Под каркасом нашего окна ставим ДИВ который будет затемнять фон при открытии окна и закрывать его при нажатии на тёмную область:
Код
<div class="md-overlay"></div>


Устанавливаем кнопку, которая будет открывать наше окно:
Код
<button class="button-cdm md-trigger" data-modal="modal-1">Моя кнопка</button>


Идём в CSS и пропишем стиль нашего окна:
Код
/* Основные стили страницы */    
.button-cdm {    
     border: none;    
     padding: 5px 15px;     
     background: #4E7CA0;    
     letter-spacing: 1px;    

     cursor: pointer;    
     display: inline-block;    
     margin: 3px 2px;     
     font:12px Verdana,Arial,Helvetica, sans-serif;    

     color: #fff;    
     border-radius: 2px;    
}    

.button-cdm:hover {    
     background: #B51B23 ;    
}    

/* Каркас окна */    
.md-modal {    
     position: fixed;    
     top: 50%;    
     left: 50%;    
     width: 50%;    
     max-width: 630px;    
     min-width: 320px;    
     height: auto;    
     z-index: 2000;    
     visibility: hidden;    
     -webkit-backface-visibility: hidden;    
     -moz-backface-visibility: hidden;    
     backface-visibility: hidden;    
     -webkit-transform: translateX(-50%) translateY(-50%);    
     -moz-transform: translateX(-50%) translateY(-50%);    
     -ms-transform: translateX(-50%) translateY(-50%);    
     transform: translateX(-50%) translateY(-50%);    
     border-radius: 3px;    
}    

.md-show {    
     visibility: visible;    
}    

/* Контент окна */    
.md-content {    
     float:left;    
     margin: 0 auto;     
     background: #fff;    
     position: relative;    
     border-radius: 3px;    
     color: #555;     
     padding: 0px 0p 25px 0px;     
}    

.md-content h3 {    
     margin: 0;    
     padding:10px 0px;    
     text-align: center;    
     background: #59B0D4;    
     border-radius: 3px 3px 0 0;    
         
     font:15px Verdana,Arial,Helvetica, sans-serif;    
     font-weight: bold;    
     color: #fff;    
}    

.md-content p {    
     margin: 20px;    
     font:115%/1.5 Verdana,Arial,Helvetica, sans-serif;    
     text-align:justify;    
    }    

    /* Кнопка закрыть */    
.md-close {    
     border: none;    
     padding: 5px 15px;     
     background: #4E7CA0;    

     cursor: pointer;    
     display:block;    
     margin: 10px auto;     
     font:12px Verdana,Arial,Helvetica, sans-serif;    
     font-weight: bold;    
     color: #fff;    
     border-radius: 3px;    
}    

.md-close:hover {    
     background: #59B0D4;    
}    

/* Ячейка заднего фона */    
.md-overlay {    
     position: fixed;    
     width: 100%;    
     height: 100%;    
     visibility: hidden;    
     top: 0;    
     left: 0;    
     z-index: 1000;    
     opacity: 0;    
     background: rgba(0,0,0,0.8);    
     -webkit-transition: all 0.3s;    
     -moz-transition: all 0.3s;    
     transition: all 0.3s;    
}    

.md-show ~ .md-overlay {    
     opacity: 1;    
     visibility: visible;    
}
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
AndreyДата: Понедельник, 09.12.2013, 17:38:44 | Сообщение # 2
Технарь
Offline
3
Ну и здесь же в CSS пропишем стиль эффектов наших окон:
Код

/* Effect 1: Fade in and scale up */   
.md-effect-1 .md-content {   
    -webkit-transform: scale(0.7);   
    -moz-transform: scale(0.7);   
    -ms-transform: scale(0.7);   
    transform: scale(0.7);   
    opacity: 0;   
    -webkit-transition: all 0.3s;   
    -moz-transition: all 0.3s;   
    transition: all 0.3s;   
}   

.md-show.md-effect-1 .md-content {   
    -webkit-transform: scale(1);   
    -moz-transform: scale(1);   
    -ms-transform: scale(1);   
    transform: scale(1);   
    opacity: 1;   
}   

/* Effect 2: Slide from the right */   
.md-effect-2 .md-content {   
    -webkit-transform: translateX(20%);   
    -moz-transform: translateX(20%);   
    -ms-transform: translateX(20%);   
    transform: translateX(20%);   
    opacity: 0;   
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);   
    -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);   
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);   
}   

.md-show.md-effect-2 .md-content {   
    -webkit-transform: translateX(0);   
    -moz-transform: translateX(0);   
    -ms-transform: translateX(0);   
    transform: translateX(0);   
    opacity: 1;   
}   

/* Effect 3: Slide from the bottom */   
.md-effect-3 .md-content {   
    -webkit-transform: translateY(20%);   
    -moz-transform: translateY(20%);   
    -ms-transform: translateY(20%);   
    transform: translateY(20%);   
    opacity: 0;   
    -webkit-transition: all 0.3s;   
    -moz-transition: all 0.3s;   
    transition: all 0.3s;   
}   

.md-show.md-effect-3 .md-content {   
    -webkit-transform: translateY(0);   
    -moz-transform: translateY(0);   
    -ms-transform: translateY(0);   
    transform: translateY(0);   
    opacity: 1;   
}   

/* Effect 4: Newspaper */   
.md-effect-4 .md-content {   
    -webkit-transform: scale(0) rotate(720deg);   
    -moz-transform: scale(0) rotate(720deg);   
    -ms-transform: scale(0) rotate(720deg);   
    transform: scale(0) rotate(720deg);   
    opacity: 0;   
}   

.md-show.md-effect-4 ~ .md-overlay,   
.md-effect-4 .md-content {   
    -webkit-transition: all 0.5s;   
    -moz-transition: all 0.5s;   
    transition: all 0.5s;   
}   

.md-show.md-effect-4 .md-content {   
    -webkit-transform: scale(1) rotate(0deg);   
    -moz-transform: scale(1) rotate(0deg);   
    -ms-transform: scale(1) rotate(0deg);   
    transform: scale(1) rotate(0deg);   
    opacity: 1;   
}   

/* Effect 5: fall */   
.md-effect-5.md-modal {   
    -webkit-perspective: 1300px;   
    -moz-perspective: 1300px;   
    perspective: 1300px;   
}   

.md-effect-5 .md-content {   
    -webkit-transform-style: preserve-3d;   
    -moz-transform-style: preserve-3d;   
    transform-style: preserve-3d;   
    -webkit-transform: translateZ(600px) rotateX(20deg);    
    -moz-transform: translateZ(600px) rotateX(20deg);    
    -ms-transform: translateZ(600px) rotateX(20deg);    
    transform: translateZ(600px) rotateX(20deg);    
    opacity: 0;   
}   

.md-show.md-effect-5 .md-content {   
    -webkit-transition: all 0.3s ease-in;   
    -moz-transition: all 0.3s ease-in;   
    transition: all 0.3s ease-in;   
    -webkit-transform: translateZ(0px) rotateX(0deg);   
    -moz-transform: translateZ(0px) rotateX(0deg);   
    -ms-transform: translateZ(0px) rotateX(0deg);   
    transform: translateZ(0px) rotateX(0deg);    
    opacity: 1;   
}   

/* Effect 6: side fall */   
.md-effect-6.md-modal {   
    -webkit-perspective: 1300px;   
    -moz-perspective: 1300px;   
    perspective: 1300px;   
}   

.md-effect-6 .md-content {   
    -webkit-transform-style: preserve-3d;   
    -moz-transform-style: preserve-3d;   
    transform-style: preserve-3d;   
    -webkit-transform: translate(30%) translateZ(600px) rotate(10deg);    
    -moz-transform: translate(30%) translateZ(600px) rotate(10deg);   
    -ms-transform: translate(30%) translateZ(600px) rotate(10deg);   
    transform: translate(30%) translateZ(600px) rotate(10deg);    
    opacity: 0;   
}   

.md-show.md-effect-6 .md-content {   
    -webkit-transition: all 0.3s ease-in;   
    -moz-transition: all 0.3s ease-in;   
    transition: all 0.3s ease-in;   
    -webkit-transform: translate(0%) translateZ(0) rotate(0deg);   
    -moz-transform: translate(0%) translateZ(0) rotate(0deg);   
    -ms-transform: translate(0%) translateZ(0) rotate(0deg);   
    transform: translate(0%) translateZ(0) rotate(0deg);   
    opacity: 1;   
}   

/* Effect 7: slide and stick to top */   
.md-effect-7{   
    top: 50px;   
    -webkit-transform: translateX(-50%);   
    -moz-transform: translateX(-50%);   
    -ms-transform: translateX(-50%);   
    transform: translateX(-50%);   
}   

.md-effect-7 .md-content {   
    -webkit-transform: translateY(-200%);   
    -moz-transform: translateY(-200%);   
    -ms-transform: translateY(-200%);   
    transform: translateY(-200%);   
    -webkit-transition: all .3s;   
    -moz-transition: all .3s;   
    transition: all .3s;   
    opacity: 0;   
}   

.md-show.md-effect-7 .md-content {   
    -webkit-transform: translateY(0%);   
    -moz-transform: translateY(0%);   
    -ms-transform: translateY(0%);   
    transform: translateY(0%);   
    border-radius: 0 0 3px 3px;   
    opacity: 1;   
}   

/* Effect 8: 3D flip horizontal */   
.md-effect-8.md-modal {   
    -webkit-perspective: 1300px;   
    -moz-perspective: 1300px;   
    perspective: 1300px;   
}   

.md-effect-8 .md-content {   
    -webkit-transform-style: preserve-3d;   
    -moz-transform-style: preserve-3d;   
    transform-style: preserve-3d;   
    -webkit-transform: rotateY(-70deg);   
    -moz-transform: rotateY(-70deg);   
    -ms-transform: rotateY(-70deg);   
    transform: rotateY(-70deg);   
    -webkit-transition: all 0.3s;   
    -moz-transition: all 0.3s;   
    transition: all 0.3s;   
    opacity: 0;   
}   

.md-show.md-effect-8 .md-content {   
    -webkit-transform: rotateY(0deg);   
    -moz-transform: rotateY(0deg);   
    -ms-transform: rotateY(0deg);   
    transform: rotateY(0deg);   
    opacity: 1;   
}   

/* Effect 9: 3D flip vertical */   
.md-effect-9.md-modal {   
    -webkit-perspective: 1300px;   
    -moz-perspective: 1300px;   
    perspective: 1300px;   
}   

.md-effect-9 .md-content {   
    -webkit-transform-style: preserve-3d;   
    -moz-transform-style: preserve-3d;   
    transform-style: preserve-3d;   
    -webkit-transform: rotateX(-70deg);   
    -moz-transform: rotateX(-70deg);   
    -ms-transform: rotateX(-70deg);   
    transform: rotateX(-70deg);   
    -webkit-transition: all 0.3s;   
    -moz-transition: all 0.3s;   
    transition: all 0.3s;   
    opacity: 0;   
}   

.md-show.md-effect-9 .md-content {   
    -webkit-transform: rotateX(0deg);   
    -moz-transform: rotateX(0deg);   
    -ms-transform: rotateX(0deg);   
    transform: rotateX(0deg);   
    opacity: 1;   
}   

/* Effect 10: 3D sign */   
.md-effect-10.md-modal {   
    -webkit-perspective: 1300px;   
    -moz-perspective: 1300px;   
    perspective: 1300px;   
}   

.md-effect-10 .md-content {   
    -webkit-transform-style: preserve-3d;   
    -moz-transform-style: preserve-3d;   
    transform-style: preserve-3d;   
    -webkit-transform: rotateX(-60deg);   
    -moz-transform: rotateX(-60deg);   
    -ms-transform: rotateX(-60deg);   
    transform: rotateX(-60deg);   
    -webkit-transform-origin: 50% 0;   
    -moz-transform-origin: 50% 0;   
    transform-origin: 50% 0;   
    opacity: 0;   
    -webkit-transition: all 0.3s;   
    -moz-transition: all 0.3s;   
    transition: all 0.3s;   
}   

.md-show.md-effect-10 .md-content {   
    -webkit-transform: rotateX(0deg);   
    -moz-transform: rotateX(0deg);   
    -ms-transform: rotateX(0deg);   
    transform: rotateX(0deg);   
    opacity: 1;   
}   

/* Effect 11: Super scaled */   
.md-effect-11 .md-content {   
    -webkit-transform: scale(2);   
    -moz-transform: scale(2);   
    -ms-transform: scale(2);   
    transform: scale(2);   
    opacity: 0;   
    -webkit-transition: all 0.3s;   
    -moz-transition: all 0.3s;   
    transition: all 0.3s;   
}   

.md-show.md-effect-11 .md-content {   
    -webkit-transform: scale(1);   
    -moz-transform: scale(1);   
    -ms-transform: scale(1);   
    transform: scale(1);   
    opacity: 1;   
}   

/* Effect 12: Just me */   
.md-effect-12 .md-content {   
    -webkit-transform: scale(0.8);   
    -moz-transform: scale(0.8);   
    -ms-transform: scale(0.8);   
    transform: scale(0.8);   
    opacity: 0;   
    -webkit-transition: all 0.3s;   
    -moz-transition: all 0.3s;   
    transition: all 0.3s;   
}   

.md-show.md-effect-12 ~ .md-overlay {   
    background: #fff;   
}    

.md-effect-12 .md-content h3,   
.md-effect-12 .md-content {   
    color:#555;   
    background: transparent;   
}   

.md-show.md-effect-12 .md-content {   
    -webkit-transform: scale(1);   
    -moz-transform: scale(1);   
    -ms-transform: scale(1);   
    transform: scale(1);   
    opacity: 1;   
}   

/* Effect 13: 3D slit */   
.md-effect-13.md-modal {   
    -webkit-perspective: 1300px;   
    -moz-perspective: 1300px;   
    perspective: 1300px;   
}   

.md-effect-13 .md-content {   
    -webkit-transform-style: preserve-3d;   
    -moz-transform-style: preserve-3d;   
    transform-style: preserve-3d;   
    -webkit-transform: translateZ(-3000px) rotateY(90deg);   
    -moz-transform: translateZ(-3000px) rotateY(90deg);   
    -ms-transform: translateZ(-3000px) rotateY(90deg);   
    transform: translateZ(-3000px) rotateY(90deg);   
    opacity: 0;   
}   

.md-show.md-effect-13 .md-content {   
    -webkit-animation: slit .7s forwards ease-out;   
    -moz-animation: slit .7s forwards ease-out;   
    animation: slit .7s forwards ease-out;   
}   

@-webkit-keyframes slit {   
    50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}   
    100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }   
}   

@-moz-keyframes slit {   
    50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}   
    100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }   
}   

@keyframes slit {   
    50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}   
    100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }   
}   

/* Effect 14: 3D Rotate from bottom */   
.md-effect-14.md-modal {   
    -webkit-perspective: 1300px;   
    -moz-perspective: 1300px;   
    perspective: 1300px;   
}   

.md-effect-14 .md-content {   
    -webkit-transform-style: preserve-3d;   
    -moz-transform-style: preserve-3d;   
    transform-style: preserve-3d;   
    -webkit-transform: translateY(100%) rotateX(90deg);   
    -moz-transform: translateY(100%) rotateX(90deg);   
    -ms-transform: translateY(100%) rotateX(90deg);   
    transform: translateY(100%) rotateX(90deg);   
    -webkit-transform-origin: 0 100%;   
    -moz-transform-origin: 0 100%;   
    transform-origin: 0 100%;   
    opacity: 0;   
    -webkit-transition: all 0.3s ease-out;   
    -moz-transition: all 0.3s ease-out;   
    transition: all 0.3s ease-out;   
}   

.md-show.md-effect-14 .md-content {   
    -webkit-transform: translateY(0%) rotateX(0deg);   
    -moz-transform: translateY(0%) rotateX(0deg);   
    -ms-transform: translateY(0%) rotateX(0deg);   
    transform: translateY(0%) rotateX(0deg);   
    opacity: 1;   
}   

/* Effect 15: 3D Rotate in from left */   
.md-effect-15.md-modal {   
    -webkit-perspective: 1300px;   
    -moz-perspective: 1300px;   
    perspective: 1300px;   
}   

.md-effect-15 .md-content {   
    -webkit-transform-style: preserve-3d;   
    -moz-transform-style: preserve-3d;   
    transform-style: preserve-3d;   
    -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);   
    -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);   
    -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);   
    transform: translateZ(100px) translateX(-30%) rotateY(90deg);   
    -webkit-transform-origin: 0 100%;   
    -moz-transform-origin: 0 100%;   
    transform-origin: 0 100%;   
    opacity: 0;   
    -webkit-transition: all 0.3s;   
    -moz-transition: all 0.3s;   
    transition: all 0.3s;   
}   

.md-show.md-effect-15 .md-content {   
    -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);   
    -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);   
    -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);   
    transform: translateZ(0px) translateX(0%) rotateY(0deg);   
    opacity: 1;   
}   

/* Effect 16: Blur */   
.md-show.md-effect-16 ~ .md-overlay {   
    background: rgba(180,46,32,0.5);   
}   

.md-show.md-effect-16 ~ .container {   
    -webkit-filter: blur(3px);   
    -moz-filter: blur(3px);   
    filter: blur(3px);   
}   

.md-effect-16 .md-content {   
    -webkit-transform: translateY(-5%);   
    -moz-transform: translateY(-5%);   
    -ms-transform: translateY(-5%);   
    transform: translateY(-5%);   
    opacity: 0;   
}   

.md-show.md-effect-16 ~ .container,   
.md-effect-16 .md-content {   
    -webkit-transition: all 0.3s;   
    -moz-transition: all 0.3s;   
    transition: all 0.3s;   
}   

.md-show.md-effect-16 .md-content {   
    -webkit-transform: translateY(0);   
    -moz-transform: translateY(0);   
    -ms-transform: translateY(0);   
    transform: translateY(0);   
    opacity: 1;   
}   

/* Effect 17: Slide in from bottom with perspective on container */   
.md-show.md-effect-17 ~ .container {   
    height: 100%;   
    overflow: hidden;   
    -webkit-transition: -webkit-transform 0.3s;   
    -moz-transition: -moz-transform 0.3s;   
    transition: transform 0.3s;   
}    

.md-show.md-effect-17 ~ .container,   
.md-show.md-effect-17 ~ .md-overlay {   
    -webkit-transform: rotateX(-2deg);   
    -moz-transform: rotateX(-2deg);   
    -ms-transform: rotateX(-2deg);   
    transform: rotateX(-2deg);   
    -webkit-transform-origin: 50% 0%;   
    -moz-transform-origin: 50% 0%;   
    transform-origin: 50% 0%;   
    -webkit-transform-style: preserve-3d;   
    -moz-transform-style: preserve-3d;   
    transform-style: preserve-3d;   
}   

.md-effect-17 .md-content {   
    opacity: 0;   
    -webkit-transform: translateY(200%);   
    -moz-transform: translateY(200%);   
    -ms-transform: translateY(200%);   
    transform: translateY(200%);   
}   

.md-show.md-effect-17 .md-content {   
    -webkit-transform: translateY(0);   
    -moz-transform: translateY(0);   
    -ms-transform: translateY(0);   
    transform: translateY(0);   
    opacity: 1;   
    -webkit-transition: all 0.3s 0.2s;   
    -moz-transition: all 0.3s 0.2s;   
    transition: all 0.3s 0.2s;   
}   

/* Effect 18: Slide from right with perspective on container */   
.md-show.md-effect-18 ~ .container {   
    height: 100%;   
    overflow: hidden;   
}   

.md-show.md-effect-18 ~ .md-overlay {   
    background: rgba(143,27,15,0.8);   
    -webkit-transition: all 0.5s;   
    -moz-transition: all 0.5s;   
    transition: all 0.5s;   
}   

.md-show.md-effect-18 ~ .container,   
.md-show.md-effect-18 ~ .md-overlay {   
    -webkit-transform-style: preserve-3d;   
    -webkit-transform-origin: 0% 50%;   
    -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;   
    -moz-transform-style: preserve-3d;   
    -moz-transform-origin: 0% 50%;   
    -moz-animation: rotateRightSideFirst 0.5s forwards ease-in;   
    transform-style: preserve-3d;   
    transform-origin: 0% 50%;   
    animation: rotateRightSideFirst 0.5s forwards ease-in;   
}   

@-webkit-keyframes rotateRightSideFirst {   
    50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }   
    100% { -webkit-transform: translateZ(-200px); }   
}   

@-moz-keyframes rotateRightSideFirst {   
    50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }   
    100% { -moz-transform: translateZ(-200px); }   
}   

@keyframes rotateRightSideFirst {   
    50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }   
    100% { transform: translateZ(-200px); }   
}   

.md-effect-18 .md-content {   
    -webkit-transform: translateX(200%);   
    -moz-transform: translateX(200%);   
    -ms-transform: translateX(200%);   
    transform: translateX(200%);   
    opacity: 0;   
}   

.md-show.md-effect-18 .md-content {   
    -webkit-transform: translateX(0);   
    -moz-transform: translateX(0);   
    -ms-transform: translateX(0);   
    transform: translateX(0);   
    opacity: 1;   
    -webkit-transition: all 0.5s 0.1s;   
    -moz-transition: all 0.5s 0.1s;   
    transition: all 0.5s 0.1s;   
}   

/* Effect 19: Slip in from the top with perspective on container */   
.md-show.md-effect-19 ~ .container {   
    height: 100%;   
    overflow: hidden;   
}   

.md-show.md-effect-19 ~ .md-overlay {   
    -webkit-transition: all 0.5s;   
    -moz-transition: all 0.5s;   
    transition: all 0.5s;   
}   

.md-show.md-effect-19 ~ .container,   
.md-show.md-effect-19 ~ .md-overlay {   
    -webkit-transform-style: preserve-3d;   
    -webkit-transform-origin: 50% 100%;   
    -webkit-animation: OpenTop 0.5s forwards ease-in;   
    -moz-transform-style: preserve-3d;   
    -moz-transform-origin: 50% 100%;   
    -moz-animation: OpenTop 0.5s forwards ease-in;   
    transform-style: preserve-3d;   
    transform-origin: 50% 100%;   
    animation: OpenTop 0.5s forwards ease-in;   
}   

@-webkit-keyframes OpenTop {   
    50% {    
    -webkit-transform: rotateX(10deg);    
    -webkit-animation-timing-function: ease-out;    
    }   
}   

@-moz-keyframes OpenTop {   
    50% {    
    -moz-transform: rotateX(10deg);    
    -moz-animation-timing-function: ease-out;    
    }   
}   

@keyframes OpenTop {   
    50% {    
    transform: rotateX(10deg);    
    animation-timing-function: ease-out;    
    }   
}   

.md-effect-19 .md-content {   
    -webkit-transform: translateY(-200%);   
    -moz-transform: translateY(-200%);   
    -ms-transform: translateY(-200%);   
    transform: translateY(-200%);   
    opacity: 0;   
}   

.md-show.md-effect-19 .md-content {   
    -webkit-transform: translateY(0);   
    -moz-transform: translateY(0);   
    -ms-transform: translateY(0);   
    transform: translateY(0);   
    opacity: 1;   
    -webkit-transition: all 0.5s 0.1s;   
    -moz-transition: all 0.5s 0.1s;   
    transition: all 0.5s 0.1s;   
}


Вот и всё наши модальные окна установлены

Источник: center-dm.ru
Материал подготовил: Andrey
 
профиль
Форум » О uCoz » Скрипты » 19 эффектов появление модального окна
Страница 1 из 11
Поиск: