Popup Window in Javascript | Popup Window Using HTML CSS Javascript
Learners, In this article we are going to design a very important and impressive project that is also a key component of web pages that help us hide unnecessary content that is not required in stating of web page anymore.
This is nothing but a popup window let me tell you why we used this in our web pages firstly it makes an awesome interaction between web pages and users. 2nd let’s take an example as we have a submit button you wouldn’t like to show a confirmation message of submit before submitting so here popup window comes in the functionality and we have many more examples like these.
Now I’m sure that you will be looking for an example from your side so don’t worry about making it visualize the moment you will have will project preview😉.
Hey learners..!
Welcome to our 🎊 today’s blog with code with random. In this blog, we gonna learn how we can design a Popup Window Using HTML CSS JAVASCRIPT.
I hope you must have got an idea about the project.
Let’s have a look at our project.
As you are looking in the project preview in the starting we have only this solo click button and if you will click it then a popup window will preview like this let’s have a look.
If in this preview if will click on the close here button then again we will back to the click button preview.
HTML SECTION
Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.
We have the following part in the HTML section.
- First, we have a container that will enclose all other parts of the whether project.
- Within the container, we have divided our project into three-part as the first part will display the location name under the h1 tag and then the symbolic form of whether and the real temp in. C or F. it depends on us what we have chosen.
- Then in the second div with the class description container, we will have all the details about min and max temp or longitude and latitude of the location, etc.
- At the end of the container part, we will have a switchable temp button that will allow us to know the temp between celsius and Fahrenheit.
Go through the below code 👇 and run it in your IDE or where you used to design just HTML without CSS styling.
<!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" />
<link rel="stylesheet" href="style.css" />
<title>popup_window</title>
</head>
<body>
<button id="open">Click</button>
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>popup or modale 😃</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat
perspiciatis voluptatum iure aliquam, ea autem deleniti eligendi, qui
minus quia at ut reprehenderit assumenda provident eius facilis
doloribus quas possimus.
</p>
<button id="close">Close here</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS SECTION
By CSS we will design our container and will bring in the center and then we will set the width for all three part of the container and will bring it after the heading and we will design both buttons.
The Below code will analyze you more👇. So just add in your HTML half complete file and wait to watch some magic.
@import url("https://fonts.googleapis.com/css2?family=Hubballi&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #edeef6;
font-family: "Hubballi", cursive;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.modal-container {
opacity: 0;
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
pointer-events: none;
transition: opacity 0.5s ease;
}
button {
background-color: #47a386;
border: 0;
border-radius: 5px;
color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
font-size: 14px;
padding: 10px 25px;
}
h1,
button,
p {
margin-top: 15px;
}
.modal {
text-align: center;
border-radius: 5px;
padding: 30px 50px;
background-color: #fff;
width: 600px;
max-width: 100%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.modal h1 {
margin: 0;
}
.modal p {
font-size: 16px;
}
.show {
opacity: 1;
pointer-events: auto;
}
button:hover {
background-color: #337560;
}
Javascript section
In the Javascript part, we will add magic logic as initially when our page will be loaded then our API fetches the system geolocation and time and will fetch data according to the geolocation and will append to the required container.
For observing this magic for this project then you should add the js file with the rest of the HTML and CSS file and enjoy this project and deploy it on Github.
const modal_container = document.getElementById("modal_container");
const btn1 = document.getElementById("open");
const btn2 = document.getElementById("close");
btn1.addEventListener("click", function () {
modal_container.classList.add("show");
});
btn2.addEventListener("click", function () {
modal_container.classList.remove("show");
});
A live preview of our project is attached below refer to this codepen
See the Pen Magical 3D Button by Lichfolky (@Lichfolky) on CodePen.
By this blog… We have learned how we can design a Popup Window in Javascript Project HTML CSS JAVASCRIPT.
Now I’m looking for your reviews.
So, How was the blog 😁, Learners!
If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊
I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.
You can follow me on Instagram
Written by @Ankit kumar
Code by @Lichfolky
