Background Image

Необычное модальное окно

Script

by — Category Script on

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


Скрипт окна состоит из двух html частей: внешней, которая представляет собой кнопку и внутренней, которая открывает содержимое на весь экран.

HTML разметка

Видимая часть страницы

<div class="cs-main-content"> 
<span style="position:absolute;left:45%;top:35%;text-transform:uppercase;padding:1em .5em"><a href="#" class="cd-btn cd-modal-trigger but-blue-act">click on the button</a></span>
</div> 

Внутренняя часть cd-modal

<div class="cd-modal"> 
<div class="modal-content"> 
<h1>Madeas studio</h1> 
<p>Агентство предлагает полный комплекс услуг для проектов любого уровня и любой стадии готовности — от начальной, когда есть лишь идея, нуждающаяся в разработке, создании инструментов и продвижении, до заключительной, когда ресурсу необходима только поддержка. Вы так же можете заказать разработку индивидуальных баннеров, иконок и оформление своей группы В Контакте.</p> 
</div> 
<a href="#0" class="modal-close">закрыть</a> 
</div> 
<div class="cd-transition-layer"> 
<div class="bg-layer"></div> 
</div> 

CSS

Видимая часть

.cd-main-content {
 position: relative;
 z-index: 2;
 width: 100%;
 height: 100vh;
 /* vertically align its content */
 display: table;
 background-color: #e4dcca;
}
.cd-main-content .center {
 /* vertically align inside parent element */
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

Внутренняя часть

.cd-modal {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 3;
 height: 100%;
 width: 100%;
 overflow: hidden;
 background: #402f44 url(/background/par1.jpg) no-repeat center center;
 background-size: cover;
 opacity: 0;
 visibility: hidden;
 -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
 -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
 transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

Здесь мы устанавливаем свое фоновое изображение, цвет текста и прочие детали.

Едем дальше...

.cd-modal .modal-content {
 height: 100%;
 overflow-y: auto;
 padding: 3em 5%;
 color: #444;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.cd-modal h1 {
 text-align: center;
}
.cd-modal h1::after {
 /* ink/brush separation */
 content: '';
 display: block;
 width: 130px;
 height: 18px;
 background: url() no-repeat center center;
 margin: .2em auto 0;
}
.cd-modal p {
 line-height: 1.6;
 margin: 2em auto;
 max-width: 800px;
}
.cd-modal .modal-close {
 /* 'X' icon */
 position: absolute;
 z-index: 1;
 top: 20px;
 right: 5%;
 height: 45px;
 width: 45px;
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.3)  url(/images/demo/cd-icon-close.svg) no-repeat center center;
 /* image replacement */
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 visibility: hidden;
 opacity: 0;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
 -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
 -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
 transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
}
.no-touch .cd-modal .modal-close:hover {
 background-color: rgba(0, 0, 0, 0.5);
}
.cd-modal.visible {
 opacity: 1;
 visibility: visible;
 -webkit-transition: opacity 0.7s, visibility 0s;
 -moz-transition: opacity 0.7s, visibility 0s;
 transition: opacity 0.7s, visibility 0s;
}
.cd-modal.visible .modal-content {
 /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
 -webkit-overflow-scrolling: touch;
}
.cd-modal.visible .modal-close {
 visibility: visible;
 opacity: 1;
 -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
 -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
 transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}

/* ---- Transition Layer ---- */
.cd-transition-layer {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 2;
 height: 100%;
 width: 100%;
 opacity: 0;
 visibility: hidden;
 overflow: hidden;
}
.cd-transition-layer .bg-layer {
 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translateY(-50%) translateX(-2%);
 -moz-transform: translateY(-50%) translateX(-2%);
 -ms-transform: translateY(-50%) translateX(-2%);
 -o-transform: translateY(-50%) translateX(-2%);
 transform: translateY(-50%) translateX(-2%);
 /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
 height: 100%;
 /* our sprite is composed of 25 frames */
 width: 2500%;
 background: url(/images/demo/cd-transition-layer.png) no-repeat 0 0;
 background-size: 100% 100%;
}
.cd-transition-layer.visible {
 opacity: 1;
 visibility: visible;
}
.cd-transition-layer.opening .bg-layer {
 -webkit-animation: cd-sprite 0.8s steps(24);
 -moz-animation: cd-sprite 0.8s steps(24);
 animation: cd-sprite 0.8s steps(24);
 -webkit-animation-fill-mode: forwards;
 -moz-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}
.cd-transition-layer.closing .bg-layer {
 -webkit-animation: cd-sprite-reverse 0.8s steps(24);
 -moz-animation: cd-sprite-reverse 0.8s steps(24);
 animation: cd-sprite-reverse 0.8s steps(24);
 -webkit-animation-fill-mode: forwards;
 -moz-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}
.no-cssanimations .cd-transition-layer {
 display: none;
}

Добавим простую анимацию через keyframes 

@-webkit-keyframes cd-sprite {
 0% {
 /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
 -webkit-transform: translateY(-50%) translateX(-2%);
 }
 100% {
 /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */
 -webkit-transform: translateY(-50%) translateX(-98%);
 }
}
@-moz-keyframes cd-sprite {
 0% {
 /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
 -moz-transform: translateY(-50%) translateX(-2%);
 }
 100% {
 /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */
 -moz-transform: translateY(-50%) translateX(-98%);
 }
}
@keyframes cd-sprite {
 0% {
 /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
 -webkit-transform: translateY(-50%) translateX(-2%);
 -moz-transform: translateY(-50%) translateX(-2%);
 -ms-transform: translateY(-50%) translateX(-2%);
 -o-transform: translateY(-50%) translateX(-2%);
 transform: translateY(-50%) translateX(-2%);
 }
 100% {
 /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */
 -webkit-transform: translateY(-50%) translateX(-98%);
 -moz-transform: translateY(-50%) translateX(-98%);
 -ms-transform: translateY(-50%) translateX(-98%);
 -o-transform: translateY(-50%) translateX(-98%);
 transform: translateY(-50%) translateX(-98%);
 }
}
@-webkit-keyframes cd-sprite-reverse {
 0% {
 -webkit-transform: translateY(-50%) translateX(-98%);
 }
 100% {
 -webkit-transform: translateY(-50%) translateX(-2%);
 }
}
@-moz-keyframes cd-sprite-reverse {
 0% {
 -moz-transform: translateY(-50%) translateX(-98%);
 }
 100% {
 -moz-transform: translateY(-50%) translateX(-2%);
 }
}
@keyframes cd-sprite-reverse {
 0% {
 -webkit-transform: translateY(-50%) translateX(-98%);
 -moz-transform: translateY(-50%) translateX(-98%);
 -ms-transform: translateY(-50%) translateX(-98%);
 -o-transform: translateY(-50%) translateX(-98%);
 transform: translateY(-50%) translateX(-98%);
 }
 100% {
 -webkit-transform: translateY(-50%) translateX(-2%);
 -moz-transform: translateY(-50%) translateX(-2%);
 -ms-transform: translateY(-50%) translateX(-2%);
 -o-transform: translateY(-50%) translateX(-2%);
 transform: translateY(-50%) translateX(-2%);
 }
}

Адаптируем окно под мобильные устройства 

@media only screen and (min-width: 1100px) {
 .cd-modal .modal-content {
 padding: 6em 5%;
 }
 .cd-modal .modal-close {
 height: 60px;
 width: 60px;
 }
 .cd-modal p {
 font-size: 2rem;
 }
}

jQuery

jQuery(document).ready(function($){
 //cache some jQuery objects
 var modalTrigger = $('.cd-modal-trigger'),
 transitionLayer = $('.cd-transition-layer'),
 transitionBackground = transitionLayer.children(),
 modalWindow = $('.cd-modal');
 var frameProportion = 1.78, //png frame aspect ratio
 frames = 25, //number of png frames
 resize = false;
 //set transitionBackground dimentions
 init();
 $(window).on('resize', function(){
 if( !resize ) {
 resize = true;
 (!window.requestAnimationFrame) ? setTimeout(init, 300) : window.requestAnimationFrame(init);
 }
 });
 //open modal window
 modalTrigger.on('click', function(event){ 
 event.preventDefault();
 transitionLayer.addClass('visible opening');
 var delay = ( $('.no-cssanimations').length > 0 ) ? 0 : 600;
 setTimeout(function(){
 modalWindow.addClass('visible');
 }, delay);
 });
 //close modal window
 modalWindow.on('click', '.modal-close', function(event){
 event.preventDefault();
 transitionLayer.addClass('closing');
 modalWindow.removeClass('visible');
 transitionBackground.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
 transitionLayer.removeClass('closing opening visible');
 transitionBackground.off('webkitAnimationEnd oanimationend msAnimationEnd animationend');
 });
 });
 function init() {
 var windowWidth = $(window).width(),
 windowHeight = $(window).height(),
 unitHeight, unitWidth;
 if( windowWidth/windowHeight > frameProportion ) {
 unitWidth = windowWidth;
 unitHeight = unitWidth/frameProportion;
 } else {
 unitHeight = windowHeight*1.2;
 unitWidth = unitHeight*frameProportion;
 }
 transitionBackground.css({
 'width': unitWidth*frames+'px',
 'height': unitHeight+'px',
 });
 resize = false;
 }
});

Готово! 


View demo
Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят:
    Нежные окна jQuery

    Нежные окна jQuery

    Уникальный дизайн модального окна продаётся на разны...

    View More
    31 1930 16:25
    10 ошибок при использовании всплывающих окон

    10 ошибок при использовании вс...

     На сегодняшний день наиболее перспективным вид...

    View More
    2 530 14:13
Метки: Ajax, modal, окно
Feedback: 0

Leave a Comment

Имя *:
Email *:
Код *:
Menu