In this article we going to learn how to create advanced pop-up boxes with HTML, CSS, and JavaScript that close when user click outside of it. This tutorial covers everything from creating simple pop-ups to advance ones with animations, interactions, and more. I have already shared the simple pop-up box in the one of the previous blog posts that close when user click on button.
In this blog post I show you the advanced pop up box that closes when clicked outside of it. You may have seen pop up boxes in many websites. Pop up box use in many ways like you have seen box or rectangular or square box appears with loading animations, error messages, discount offers, success messages, signup form pop ups, confirmation message for deletion, etc.
Video Tutorial for Advance Pop-Up Box Using HTML, CSS and JavaScript.
Advance pop-up box.
How are we going to create it? First, we are going to create a button to open the pop up box. Then we create a full width and height background for the pop-up box. And then finally we are going to create that pop up box inside that background.
And add functionality to close the pop-up box when clicked outside of it. As there is a full width and height background behind the pop up box. So, when the user clicks on the background the pop up will be close and the background too. Looking like a pop up box closes when clicked outside of it.
You can see the demo in the above YouTube video that when clicking on the create button, that button looks something like a blur because of the background appearance of this pop-up box.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder with name index.html and index.css.
I've integrated JavaScript within the HTML file.
Below are the steps which I have created for you to make this advance pop-up box using HTML, CSS and JavaScript.
Step 1: Set up files and create basic html structure.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
<script>
</script>
</html>
CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
background-color: #000;
}
Output:
Step 2: Create button to show pop up.
Let’s first create button. Button to open the pop-up box by clicking.
Also read: How to create CSS button hover effects.
Also read: How to detect button is on hold using javascript.
HTML
<button type="button" class="open_button">Create</button>
CSS
.open_button{
background-color: #fff;
padding: 5px 20px;
font-size: 25px;
font-weight: bold;
border-radius: 5px;
display: block;
margin: 0px auto;
cursor: pointer;
transition: 0.2s;
}
.open_button:hover{
background-color: blue;
color: #fff;
}
Output:
Step 2: Create a Pop-Up box.
So, as I said above, we are going to create a box inside the background (full width & height). So first we make a background. And then add a pop up box inside it.
So, let’s first create a background below the open button (class="open_button").
HTML
<div class="outer_box">
</div>
CSS
.outer_box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background-color: #ffffffe9;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Output:
Let’s add a pop box inside it. I have added transition-delay to this. Because I want this box to appear in the background.
HTML
<div class="outer_box">
<div class="box">
<p class="title">Success</p>
<div class="content_box">
<div class="content">
<span></span>
<p>Registration Successful!</p>
</div>
<div class="button_box">
<button type="button" class="close_button">Ok</button>
</div>
</div>
</div>
</div>
CSS
.outer_box .box{
width: 450px;
background-color: #fff;
box-shadow: 0px 5px 50px -20px rgb(0 0 0);
overflow: hidden;
border-radius: 10px;
transition: 0.3s;
transition-delay: 0.2s;
}
.outer_box .box .title{
background-color: #4abd2a;
font-size: 35px;
color: #fff;
font-weight: bold;
padding: 10px;
}
.box .content_box{
text-align: center;
padding: 10px 30px;
}
.box .content_box .content{
font-size: 25px;
padding: 25px 0px;
color: #000;
font-weight: bold;
}
.box .content_box .content p{
padding: 25px 0px;
}
.box .content_box .content span{
width: 30px;
height: 60px;
border-bottom: 8px solid #0aff16;
border-right: 8px solid #64e141;
display: inline-block;
rotate: 45deg;
}
.button_box{
width: 100%;
text-align: right;
}
.button_box button{
font-size: 25px;
padding: 8px 20px;
font-weight: bold;
border: none;
border-radius: 10px;
cursor: pointer;
}
Output:
Now let’s hide both background and pop up box. Let's first hide the background.
CSS
.outer_box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background-color: #ffffffe9;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
}
Now hide the pop up box. I want to show a pop up box from small to bigger size, so I have also added transform: scale(0.7) to decrease its size.
CSS
.outer_box .box{
width: 450px;
background-color: #fff;
box-shadow: 0px 5px 50px -20px rgb(0 0 0);
overflow: hidden;
border-radius: 10px;
pointer-events: none;
opacity: 0;
transform: scale(0.7);
transition: 0.3s;
transition-delay: 0.2s;
}
And to show it we are going to add other classes that have CSS property to show the pop up box and its background.
For pop up box (class="box") visibility we'll create an active class. And for its background (class="outer_box") we'll create an .outer_box_active class.
We'll add and remove those classes using JavaScript for their show and hide functionality.
Let’s create another class.
CSS
/* ---------- for background (class="outer_box") ---------- */
.outer_box_active{
pointer-events: fill;
opacity: 1;
}
/* ---------- for pop up box (class="box") ---------- */
.outer_box .active{
pointer-events: fill;
opacity: 1;
transform: scale(1);
}
Step 3: Add JavaScript for functionality.
Now let’s add JavaScript to show and hide the pop up box. We are going to toggle the above created classes.(.active , .outer_box_active) in the pop up box (class=”box”) and its background (class=”outer_box”).
Let’s first write code to display it. We are going to display it when the user clicks on the button ("create").
JavaScript
let open_button = document.querySelector(".open_button");
let close_button = document.querySelector(".close_button");
let outer_box = document.querySelector(".outer_box");
let box = document.querySelector(".box");
open_button.onclick = function(){
box.classList.toggle("active");
outer_box.classList.toggle("outer_box_active");
}
Now let’s add functionality to hide it.
We are going to hide it when the user clicks on the "ok" button, which is inside the pop up box.
JavaScript
close_button.onclick = function(){
box.classList.toggle("active");
outer_box.classList.toggle("outer_box_active");
}
Now let’s add functionality to close the pop-up box when the user clicks outside of it. And outside of this box is only its background which is of full width & height.
So, let's write code to close this box when the user clicks on the background. So, we just detect the clicks. If click does not contain the element with class="box" then we hide it. Means if click does not happen on the pop up box we'll toggle the class (it will be removed).
JavaScript
outer_box.onclick = function(e){
if(!box.contains(e.target)){
box.classList.toggle("active");
outer_box.classList.toggle("outer_box_active");
}
}
So that’s it you can see demo in above YouTube video.
You may like:
- How to create a side navigation that close when click outside of it using html, css and javascript.
- How to create automatic pop up that displaying countdown timer inside using html, css and javascript.
- How to create a automatic pop up form (login and registration form) on a page load.
- How to create a animated notification message using html, css and javascript.
- How to hide element when click outside of it using html, css and javascript.
- How to create a tags input box using html, css and javascript.
Final code:
So that’s how you can make an advanced pop-up box or html popup modal box that closes when clicked outside of it using html css and javascript. If you have any query or suggestion you can write in the comment section.
Share your thoughts.