In this article, I show you how to make pop up box or message that initially hidden and show when click on button using html css and javascript. You may have seen in many websites that when something goes wrong or something done successfully the pop-up box appears.
In this article, I show you the pop-up box that have success message 'Thank you! Account created successfully.’, which is initially hidden and only visible, when user click on button with inner text create (its just for example), and close when click on 'ok' button which is inside the pop-box.
I have created this success pop-up box. You can also create delete pop-up box for reconfirmation like 'attention are you sure you want to delete', like this. Here below is the image of our success pop-up box.
To show and hide this pop-up. Inshort, I have set opacity:0 to hide the box initially and when user click on button present inside pop-up, then we'll set opacity:1.
I have added separate class with name .active_box in css file in which, I have added property and its value opacity: 1 and pointer event: fill. When user click on button, this class list added to box, so that box will visible. And to hide it remove this class from box. To add and remove this class list in box class, I used javascript.
Video Tutorial on Simple Pop Up Box Using JavaScript:
I hope you understand the video. Its a simple html css and javascript, which i used. So let's start making simple pop up box.
Simple Pop Up Box.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
I’ve integrated javascript within the html file inside the script tag. You can create a separate file and link it to an html file.
Step 1: Create basic html structure.
First of all, we'll add basic html structure and create background and inside it, We'll add button in the center. By clicking on it, we'll show the pop up box.
Also read: Simple CSS button hover effects.
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>
<div class="container">
<button class="open_button" type="button">Create</button>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #f1f1f1;
position: relative;
}
.container .open_button{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background-color: #fff;
border: none;
padding: 10px 20px;
font-size: 30px;
cursor: pointer;
}
Output :
Step 2: Create box to pop up.
Now after creating a button, let’s create box that will pop up when user click on button created above. We going to create success pop up box. (example). We'll position the box in the center of the page, above the button.
Also read: Design the checkbox, add animation to it, get the value of selected checkbox.
HTML
<div class="box">
<p class="heading">Success</p>
<div class="message_box">
<p style="font-size: 30px;">Thank you !</p>
<p class="message">Account created successfully.</p>
<div class="button_box">
<button class="close_button" type="button">OK</button>
</div>
</div>
</div>
CSS
.container .box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 400px;
background-color: #fff;
box-shadow: 0px 2px 30px -20px rgb(0 0 0);
transition: 0.2s;
}
.container .box .heading{
font-size: 35px;
text-align: left;
padding: 6px;
margin-bottom: 10px;
color: #fff;
background-color: #01c345;
}
.container .box .message_box{
margin: 20px;
}
.container .box .message_box .message{
font-size: 20px;
margin: 10px 0px;
}
.container .box .button_box{
width: 100%;
text-align: right;
}
.container .box .button_box .close_button{
font-size: 25px;
padding: 8px 20px;
border: none;
cursor: pointer;
}
Output :
CSS
.container .box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 400px;
background-color: #fff;
box-shadow: 0px 2px 30px -20px rgb(0 0 0);
opacity: 0;
pointer-events: none;
transition: 0.2s;
}
Output :
As you can see in image above that box is hidden and only button is their.
So let's add functionality with javascript to show and hide the box.
We'll make box to appear when button clicked and hide the box when user click on "ok" button present in box.
For functionality of show and hide box. We'll add and remove the new class (box_active) in the box. Which contains style of visibling the box. So when this class is added in box, the visible otherwise hidden.
So let's first create a box_active class in css file.
css
.container .box_active{
opacity: 1;
pointer-events: fill;
}
Step 4: Show and Hide Box Using JavaScript.
Now let’s add javascript to show and hide box (pop up box). So, first we'll define variables for both buttons and pop up box.
JavaScript
let box = document.querySelector('.box');
let open_button = document.querySelector('.open_button');
let close_button = document.querySelector('.close_button');
Now let’s add that newly created class (.active_box) to box class to show the box. and remove it when user click on .close_button "ok" button present in box to hide the box.
JavaScript
open_button.onclick = function(){
box.classList.add('box_active');
}
close_button.onclick = function(){
box.classList.remove('box_active');
}
So that’s its simple pop up box is ready using HTML, CSS and JavaScript. Now when you click on create button, a pop up box will appear and when click on "OK" button present in box, the box will disappears.
You may like:
- How to create automatic pop up forms using HTML, CSS & JavaScript.
- How to create pop up box that close when click outside of it using HTML, CSS and JavaScript.
- How to create animated notification using HTML, CSS & JavaScript.
- How to create show and hide sidebar menu using only HTML and CSS.
- How to create a tags input box with tag limit using HTML, CSS and JavaScript.
- How to create animated skills bar using JavaScript.
- How to create a pop up box that displaying count down timer for any discount offer.
Final code :
I hope you learned, how to make the simple pop-up box using HTML, CSS and JavaScript. If you have any question or suggestion feel free to write them in the comment section.
Share your thoughts.