Fantasía plegable modal popup con JavaScript y CSS

Vista prévia

Descripción

Una ventana emergente modal elegante que viene con un efecto de animación plegable de lujo basado en SVG, CSS/CSS3, y < a href = "https://greensock.com/gsap" target = "_ blank" rel = "noopener" > GSAP biblioteca de animación JavaScript.

Funcionamiento

Cree el código HTML para la ventana modal.

<div id="modal-demo" class="modal-container">



<div class="modal-dialog">




<svg class="modal-svg" viewBox="0 0 100 100" preserveAspectRatio="none">



<polygon class="modal-polygon">


</svg>





<div class="modal-content">



<h2>Modal Title</h2>



<p>Modal Content Here</p>


</div>




</div>
</div>

Cree un botón estándar para abrir la ventana modal.

<button id="open-button">Launch</button>

Estilo de la ventana modal en el CSS como éstos:

.modal-container {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

position: absolute;

top: 0;

left: 0;

z-index: 1;

width: 100%;

height: 100vh;

overflow: hidden;

background: rgba(0, 0, 0, 0.15);

opacity: 0;

visibility: hidden;
}

.modal-dialog {

width: 70vmin;

height: 70vmin;

position: relative;

overflow: hidden;
}

.modal-svg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;
}

.modal-polygon { fill: #ab47bc; }

.modal-content {

position: relative;

top: 0;

left: 0;

padding: 24px;

visibility: hidden;

opacity: 0;

color: rgba(255, 255, 255, 0.87);
}

Incluya la biblioteca TweenMax. js de GSAP necesaria en la página.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>

El JavaScript para activar la ventana modal & la animación plegable.

var body = document.body;
var modal = createModal(document.querySelector("#modal-demo"));
var openButton = document.querySelector("#open-button");

openButton.addEventListener("click", function() {

modal.open();
});

function createModal(container) {



var content = container.querySelector(".modal-content");

var dialog = container.querySelector(".modal-dialog");

var polygon = container.querySelector(".modal-polygon");

var svg = container.querySelector(".modal-svg");



var point1 = createPoint(45, 45);

var point2 = createPoint(55, 45);

var point3 = createPoint(55, 55);

var point4 = createPoint(45, 55);





var animation = new TimelineMax({





onReverseComplete: onReverseComplete,



onStart: onStart,



paused: true


})




 .to(point1, 0.3, {



x: 15,



y: 30,



ease: Power4.easeIn


}, 0)


.to(point4, 0.3, {



x: 5,



y: 80,



ease: Power2.easeIn


}, "-=0.1")


.to(point1, 0.3, {



x: 0,



y: 0,



ease: Power3.easeIn


})


.to(point2, 0.3, {



x: 100,



y: 0,



ease: Power2.easeIn


}, "-=0.2")


.to(point3, 0.3, {



x: 100,



y: 100,



ease: Power2.easeIn


})


.to(point4, 0.3, {



x: 0,



y: 100,



ease: Power2.easeIn


}, "-=0.1")



.to(container, 1, {



autoAlpha: 1


}, 0)



.to(content, 1, {



autoAlpha: 1


})



var modal = {


animation: animation,


container: container,


content: content,


dialog: dialog,




isOpen: false,


open: open,


close: close


 };



body.removeChild(container);




function onClick() {





if (modal.isOpen) {



close();


}

}



function onStart() {


body.appendChild(container);


container.addEventListener("click", onClick);

}



function onReverseComplete() {


container.removeEventListener("click", onClick);


body.removeChild(container);

}



function open() {


modal.isOpen = true;


animation.play().timeScale(2);

}



function close() {


modal.isOpen = false;


animation.reverse().timeScale(2.5);

}




function createPoint(x, y) {


var point = polygon.points.appendItem(svg.createSVGPoint());


point.x = x || 0;


point.y = y || 0;


return point;

}



return modal;
}