Create Modal Box Using CSS And JS

How to create Modal Box with CSS and JavaScript. The purpose is to complete a transparent and simple modal popup box that does not use third-party libraries and is cross-browser compatible. We have to use vanilla JavaScript. Since we have been creating it from the start, we have complete control over how it looks and works.

Create Modal Box Using CSS and JS

Modal popups are widely used on the web. Some of their popular uses include driving newsletter signups, displaying notifications/alerts, and handling registration forms.

This model will be broad which means you’ll be free to use it for any purpose and anywhere.

HTML

Let’s start with HTML code.

<div class="container">
    <div class="popup-box">
        <a class="close-button popup-close" title="close">×</a>
        <h2>This is My PopUp</h2>
      <h3>How to create a model box with HTML CSS and JavaScript.</h3>
    </div>
</div>
<a class="button popup-button">Open Model!</a>

CSS Code:

<style>
body {
  font-family: "Open Sans";
  line-height: 200%;
}
.container {    position: fixed;    left: 0;    top: 0;
    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 1.5);
    opacity: 0;    visibility: hidden;    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
h2, h3{
  text-align:center;  font-size: 5.5em;  padding:20px;}
h3{
  text-align:center;  font-size: 4em;  line-height:1.5em;  color:#888;}

.button {
  padding: 2.2% 5.5%;  display: inline-block;  -webkit-transition: all linear 0.15s;
  transition: all linear 0.15s;  border-radius: 3px;  background: #7b78ff;
  font-size: 22px;  font-weight: bold;  text-decoration: none;
  text-transform: uppercase;  color: #fff;}

.button:hover {  opacity: 1.75;  cursor:pointer;  color:#000;}

.popup-box {  width: 80%;  height:500px;  padding: 70px;
  transform: translate(-50%, -50%) scale(0.5);
  position: absolute;  top: 50%;  left: 50%;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.8);
  border-radius: 5px;  background: #fff;
  text-align: center;}

.close-button {  width: 35px;  height: 35px;  display: inline-block;
  position: absolute;  top: 10px;  font-size:60px;  right: 10px;
  -webkit-transition: all ease 0.5s;  transition: all ease 0.5s;
  border-radius: 50%;  background: #7b78ff;  font-weight: bold;
  color: #fff;  text-align:center;  cursor:pointer; 
}
.close-button:hover {  -webkit-transform: rotate(180deg);
  transform: rotate(400deg);
}
.show-container {    opacity: 1;    visibility: visible;    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 1.25s 0s, transform 1.25s;
}
</style>

Read More and see Demo:Create Modal Box Using CSS And JS