How to Create a Simple Modal Box using HTML ,CSS and JavaScript

In this video we will teach you how to create a simple modal box using HTML ,CSS and vanilla JavaScript . We have replicated windows default program window but you can make simple one.It is most advanced modal box i have ever seen.

Subscribe : https://www.youtube.com/channel/UC9vqZpApNd4M0Pl5yR4banw

Source Code :

HTML :


<html>

<head>

<title>Modal Box</title>

<link _rel_="stylesheet" _href_="main.css">

<link _href_="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" _rel_="stylesheet" _integrity_="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" _crossorigin_="anonymous">

</head>

<body>

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

<div _class_="box">

<div _class_="header">

<div _class_="titlebox">

 Modal Box

</div>

<div _class_="icons">

<i _class_="fa fa-minus" _aria-hidden_="true" _id_="min"></i>

<i _class_="fa fa-window-maximize" _aria-hidden_="true" _id_="max"></i>

<i _class_="fa fa-times" _aria-hidden_="true" _id_="close"></i>

</div>

</div>

<div _class_="content">

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>

</footer>

</div>

<script _src_="app.js"></script>

</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)";

}

#js #javascript #html #css