модальные окна на CSS3 с эффектами
827материалов
228тем на форуме
3003комментария
6152пользователя

модальные окна на CSS3 с эффектами


Опять же по наводке одного хорошего пользователя, который решил остаться инкогнито (nik245 не хотел, чтобы кто-то узнал, что именно он показал мне демо) я просто офигел, когда увидел настолько удивительные эффекты, с которыми открывались эти модальные окна. Мне пришлось немало потрудиться, чтобы запустить этот скрипт для тестирования, но потраченное время того стоило 

Для начала насладитесь ДЕМО 
Мои мучения в фидле: КЛИК 

Установка: 

После /head на нужных страницах вставляйте:
Код
<script src="/js/modernizr.custom.js"></script>

Следующий код вставляйте в самый низ css:
Код
/* General styles for the modal */   

   /*  
   Styles for the html/body for special modal where we want 3d effects   
   Note that we need a container wrapping all content on the page for the  
   perspective effects (not including the modals and the overlay).   
   */   
   .md-perspective, .md-perspective body {   
   height: 100%;   
   overflow: hidden;   
   }   
   .md-perspective body {   
   background: #222;   
   -webkit-perspective: 600px;   
   -moz-perspective: 600px;   
   perspective: 600px;   
   }   
   .container {   
   background: #e74c3c;   
   min-height: 100%;   
   }   
   .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%);   
   }   
   .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);   
   -webkit-transition: all 0.3s;   
   -moz-transition: all 0.3s;   
   transition: all 0.3s;   
   }   
   .md-show ~ .md-overlay {   
   opacity: 1;   
   visibility: visible;   
   }   
   /* Content styles */   
   .md-content {   
   color: #fff;   
   background: #e74c3c;   
   position: relative;   
   border-radius: 3px;   
   margin: 0 auto;   
   }   
   .md-content h3 {   
   margin: 0;   
   padding: 0.4em;   
   text-align: center;   
   font-size: 2.4em;   
   font-weight: 300;   
   opacity: 0.8;   
   background: rgba(0, 0, 0, 0.1);   
   border-radius: 3px 3px 0 0;   
   }   
   .md-content > div {   
   padding: 15px 40px 30px;   
   margin: 0;   
   font-weight: 300;   
   font-size: 1.15em;   
   }   
   .md-content > div p {   
   margin: 0;   
   padding: 10px 0;   
   }   
   .md-content > div ul {   
   margin: 0;   
   padding: 0 0 30px 20px;   
   }   
   .md-content > div ul li {   
   padding: 5px 0;   
   }   
   .md-content button {   
   display: block;   
   margin: 0 auto;   
   font-size: 0.8em;   
   }   
   /* Individual modal styles with animations/transitions */   

   /* 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: 0;   
   -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: #e74c3c;   
   }   
   .md-effect-12 .md-content h3, .md-effect-12 .md-content {   
   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;   
   }

Далее пример модального окна и кнопки его запуска:
Код
<div class="md-modal md-effect-1" id="modal-1">   
   <div class="md-content">   
   <h3>Заголовок окна</h3>   
   <div>   
   <p>http://apo-ucoz.com - всё лучшее для всеб разработчика</p>   
   <ul>   
   <li><strong>Скрипты:</strong> у нас только отборные проверенные материалы</li>   
   <li><strong>Бесплатная помощь:</strong> лучшие умы планеты помогут решить ваши проблемы</li>   
   <li><strong>Мороженка каждому новому пользователю:</strong> мы умеем юморить. На apo-ucoz весело</li>   
   </ul>   
   <button class="md-close">Закрой меня нах</button>   
   </div>   
   </div>   
   </div>   

   <button class="md-trigger" data-modal="modal-1">Fade in Scale</button>

class="md-modal md-effect-1" - меняйте этот параметр, чтобы сменить эффект показа и скрытия модального окна 

Осталось лишь забабахать в самый низ на нужных страницах после тега /body следующий код:
Код
<div class="md-overlay"></div>   
   <script src="/js/classie.js"></script>   
   <script src="/js/modalEffects.js"></script>   
   <script>   
   var polyfilter_scriptpath = '/js/';   
   </script>   
   <script src="/js/cssParser.js"></script>   
   <script src="/js/css-filters-polyfill.js"></script>


Осталось только залить пять скриптов из прикреплённого архива в папку js

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 20.07.2013 в 01:50
Материал просмотрен: 1163 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта