How to Create Modal Box Using CSS and JS
Tags: webdev, javascript, programming, tutorial
Published: 2022-01-07 14:53:16

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.

##Create Modal Box Using CSS and JS


![Create Modal Box Using CSS and JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4i5uulbujcc5bbqqfrq.jpg)

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 Markup
```HTML
<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

```CSS

<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>
```

Javascript

```Javascript
<script>
const container = document.querySelector(".container");
const button = document.querySelector(".button");
const closeButton = document.querySelector(".close-button");

function togglecontainer() {
    container.classList.toggle("show-container");
}
function windowOnClick(event) {
    if (event.target === container) {
        togglecontainer();
    }}
button.addEventListener("click", togglecontainer);
closeButton.addEventListener("click", togglecontainer);
window.addEventListener("click", windowOnClick);
</script>
```
You can read this article in detail from here [Create Modal Box Using CSS and JS](https://softcodeon.com/tutorials/create-modal-box-using-css-and-js.htm)

To see [Demo](https://codepen.io/softcodeon/pen/YzrvERx)

Modal boxes are favored globally and now you have an easy-to-use process that is light and does not use third-party libraries like jQuery. You can use this model box for newsletters, sign-ups, or whatever you want! Hope you enjoy the results and find it helpful. If you have any questions please discuss below. Thank you.