Modal Box

TITLE : Simple Modal Box / Pop Up Using HTMl, CSS and Javascript | Most Advanced Modal Box

HTML :

<html>

<head>

<title>Modal Box</title>

</head>

<body>

<button class="btn">Click</button>

<span id="title">Modal Box</span>

</div>

</div>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae temporibus. Delectus quibusdam sunt est, quod, ad vitae officia architecto non dignissimos aut hic molestiae. Quo aliquam placeat et illo!Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae temporibus. Delectus quibusdam sunt est, quod, ad vitae officia architecto non dignissimos aut hic molestiae. Quo aliquam placeat et illo!Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae temporibus. Delectus quibusdam sunt est, quod, ad vitae officia architecto non dignissimos aut hic molestiae. Quo aliquam placeat et illo!

</div>

</footer>

</div>

</body>

</html>

CSS :

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: righteous;

}

body {

width: 100%;

height: 100vh;

background: #0ff;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

}

.btn {

padding: 10px 60px;

background: #212121;

color:#fff;

box-shadow: 0 10px 25px -4px rgba(0,0,0,0.3);

outline: none;

border: none;

font-size: 1.1rem;

position: absolute;

}

.box {

width: 60%;

height: 70%;

background: #fff;

box-shadow: 0 10px 25px -4px rgba(0,0,0,0.3);

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;

transform: scale(0);

transition: 0.3s;

}

.header {

width: 100%;

background: #e0e0e0;

display: flex;

justify-content: space-between;

align-items: center;

font-size: 1.25rem;

}

.titlebox {

padding-left: 30px;

}

.fa {

padding: 8px 15px;

transition: 0.3s;

}

.fa-minus:hover,.fa-window-maximize:hover {

background: #fff;

}

.fa-times:hover {

background: #f44860;

color: #fff;

}

.content {

width: 100%;

padding: 0 30px;

text-align: justify;

}

footer {

background: #88304e;

height: 12px;

width: 100%;

}

JavaScript :

var btn = document.querySelector('.btn');

var box = document.querySelector('.box');

var min = document.querySelector('#min');

var max = document.querySelector('#max');

var close = document.querySelector('#close');

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

box.style.transform = "scale(1)";

min.style.opacity = "0";

});

max.onclick = function() {

box.style.width="100%";

box.style.height="100vh";

box.style.fontSize="1.5rem";

min.style.opacity = "1";

};

min.onclick = function() {

box.style.width="60%";

box.style.height="70%";

min.style.opacity = "0";

box.style.fontSize="1.1rem";

}

close.onclick = function() {

box.style.transform = "scale(0)";

}