<section class="controls">
<button id="open-button">Open</button>
</section>
<section id="modal-1" 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>I'm a modal</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis excepturi ut inventore consectetur quos rerum quibusdam accusamus, labore itaque assumenda consequatur cum saepe velit quidem ipsa facilis. Repellendus, reiciendis quam?</p>
</div>
</div>
</section>
button {
cursor: pointer;
padding: 0 6px;
min-width: 88px;
min-height: 36px;
}
.controls {
padding: 24px;
}
.modal-container {
display: flex;
align-items: 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);
}
View Compiled
console.clear();
var body = document.body;
var modal = createModal(document.querySelector("#modal-1"));
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;
}
This Pen doesn't use any external CSS resources.