Главная » Файлы » Разработки uCoz » Прочее

19 эффектов появление модального окна, для uCoz
18.07.2013, 14:52
Всем массовый привет, сегодня в этой статье я предоставляю всем желающим выбрать один из девятнадцати примеров появление модального окна для системы uCoz, но как и положено смотрим демо и выбираем понравившейся пример!

Установка

Шаг 1 - Установим JS:
Напоминаю, что в системе uCoz уже установлена библиотека jquery, поэтому вниз страницы, перед закрывающим тегом
Код
</body>
установим два скрипта:

JS

Код
<script src="http://www.center-dm.ru/data/jQuery/Modal_okno/1/classie.js"></script>  
<script src="http://www.center-dm.ru/data/jQuery/Modal_okno/1/modalEffects.js"></script>


Шаг 2 - Установим HTML:
Теперь нам следует установить также в низ вашей страницы html каркас окна:

HTML

Код
<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>  
   
  <div class="md-overlay"></div>

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

Код
class="md-modal md-effect-1" id="modal-1"


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

а теперь давайте установим html код самой кнопки, при нажатии на которую появиться наше окно:

HTML
Код
<button class="button-cdm md-trigger" data-modal="modal-1">Моя кнопка</button>


Шаг 3 - Установим CSS:
Ну и в завершении нашего решения, давайте пропишем css стили нашему каркасу окна, а также установим его эффекты появление:

CSS-Code

Код
/* Основные стили страницы  
------------------------------------------*/  
.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;  
}  

/* 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;  
}

Вот и всё, мы установили на ваш сайт в системе uCoz один из девятнадцати примеров модального окна.
Категория: Прочее | Добавил: Pincher | Теги: эффектов, Появление, uCoz, модального, окна, Прочее, 19, для
Просмотров: 201 | Загрузок: 0 | Рейтинг: 1.0/6
Всего комментариев: 0
avatar