How to Create a Modal Box using HTML, CSS & JavaScript

Firstly, you need to be familiar with HTML, CSS and JavaScript to understand this tutorial. If you are then move on and if not I'll suggest you get yourself familiarized with those.

Now here are what we will be doing:
1. Create the modal structure with HTML
2. Style the structure with CSS
3. Show and hide the modal with JavaScript

1.  Create the modal structure

Create the modal container. We'll be doing this with the div element.Inside the container create a sub-container which will contain our modal content.
 Code snippet:

<div class = "modal_container">

<div class = "modal_content">

</div>
</div>

The class names given to both the container and content will be referenced in our CSS style.

2. Style the structure

Now lets give the .modal_container the following:

• a transparent black background-color : rgba(0,0,0,0.5)
• a width and height of 100% : this is because we want it to cover the entire viewport (screen). 
• a position of fixed: this is in order for it to be positioned relative to the viewport.
• a top of 0px: that is, don't give room for elements on top of this one.
• a bottom of 0px: that is, don't give room for elements at the bottom of this one.

And for the .model_content: 

• a white background-color
• a margin of 15% and auto: this will set it at the middle of the screen and a top and bottom margin of 15%;
• a width of 50% and height of 30%

 Code snippet:

               .modal_container{
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
position: fixed;
                        top: 0px;
                        bottom: 0px;
}
.modal_content{
background-color: #fff;
                        margin: 15% auto;
width: 50%;
height: 40%;
  }

The output: 

With a little bit of more styling we get this:

3.  Show and hide the modal.

Now lets hide the modal box in order the show it at the click of a button. 
To hide the box, give the .modal_container a display value of none. This makes the modal container 'disappear' when the page is loaded at first.
Create a button with an id of show_modal. This button will show the modal box when clicked.

 Code snippet:

.modal_container{
.
.
.
display: none;
}

<button id = 'show_modal'>Show modal box</button>
<div class = "modal_container">
.
.
.

The output: 

Open a script tag before the closing body tag. This is where we will be putting our JavaScript code. 
The variable isModal  gives us the hidden/shown status of the modal box - false for hidden and true for shown. The addEventListener function is used to listen for the click event which invokes a callback function. Inside the function, we will set the display value of the .modal_container to block in order to show it.
 Code snippet:

<script>
var modal_box = document.querySelector('.modal_container');
var isModal = false;

show_modal.addEventListener('click', function () {
modal_box.style.display = 'block';
isModal = true;
});

</script>

Now to hide the modal box.
We'll add an event listener to the body node of the page which listens for the click event and the sets the display value of the .modal_container to none.
 Code snippet:

 .
.
.
document.body.addEventListener('click', function(event){
if(!isModal){
modal_box.style.display = 'none';
}
isModal = false;

});

</script>

Here's the logic: show the modal box when the button is clicked and then set the isModal to true (that is, shown) and at the same time set it to false. It happens this way because each time the button is click the body node is also clicked (due to event propagation). And then when any part of the viewport is clicked the modal box 'disappears'.

And there you have it.
Thank you!