A Pop-up is basically a second chance while using an application or software. When we close some application or software a pop-up appears that are we sure to close that running process it gives us two options of yes and no we have to select according to our needs.
Pop-up is compulsory nowadays because one wrong decision can lead us to regret like when we forgot to save some work or when we couldn't figure out something. So the need of a pop-up is necessary for all the applications and software.
On that note, I welcome you all to Codewithrandom with a new blog that will describe the creation of the Automatic Popup Window. We Use HTML,CSS and JavaScript For Automatic Popup Window Project.
I hope you have got an idea for this project.
HTML Code for Popup Window
<!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>POP UP</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div id="brand"><h1>Codewithrandom</h1></div>
</header>
<main>
<p>
Welcome to CWR a free of cost center where you'll get a excellent
knowledge regarding front-end development.
</p>
</main>
<footer>codewithrandom</footer>
<div id="window-mask" class="open">
<div class="pop-up">
<div class="pop-up-content">
<div class="pop-up-header"></div>
<h3>Title</h3>
<div class="description">
<p>Are you sure to exit?</p>
</div>
<div class="response">
<div>YES</div>
<div>NO</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
In this HTML code we have defined the structure in which we have set a header a paragraph and the description class is our pop in which we have added the content with two options. Now lets style the page using CSS.
CSS Code for Popup Window
body {
margin: 0;
padding: 0;
background: #90CAF9;
color: rgba(0, 0, 0, 0.87);
font-family: sans-serif;
}
header {
height: 150px;
background: #1565C0;
position: relative;
color: #FFFFFF;
font-weight: 700;
}
header > div {
position: absolute;
}
#logo {
width: 128px;
height: 150px;
background: #FFC107;
z-index: 1;
text-align: center;
left: 5%;
bottom: -8%;
}
#brand {
left: 27%;
top: 20px;
}
footer {
display: block;
width: 46%;
height: 50px;
text-align: center;
background: #1E88E5;
box-shadow: 0 3px 5px 2px rgba(0, 0, 0, 0.5);
padding: 17px 27% 0 27%;
color: #FFFFFF;
}
main {
padding: 25px 20% 25px 20%;
text-indent: 50px;
}
#featured-review {
display: block;
width: 100%;
}
#window-mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 99999999;
}
#window-mask.open
{
display: block;
}
.pop-up
{
width:70%;
height: 80%;
background: #FFFFFF;
position: absolute;
left: 15%;
top: 20%;
/* margin-left:-25%; */
margin-top: -50px;
}
.pop-up-content
{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.pop-up-header
{
width: 100%;
height: 40%;
background: #64B5F6
}
.pop-up p
{
margin: 10px 50px;
}
.pop-up h3
{
margin: 10px 50px;
}
.pop-up .response
{
width: 100%;
height: 20%;
margin-top: 10px;
display: block;
position: absolute;
bottom: 0;
box-shadow: 0 0 0 6px rgba(0,0,0, 0.12)
}
.pop-up .response div
{
width:49%;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
text-align: center;
line-height: 90px;
}
.pop-up .response div:first-child
{
box-shadow: 0 6px 0 6px rgba(0,0,0, 0.12)
}
.description
{
height:75px;
overflow-y:scroll;
}
In this CSS code if you see while the process of styling we have used the pop up many times because CSS also contribute to many the pop user friendly and little response which means after how many seconds it has come or disappear.
Then we have padded the defined elements and gave the alignment so that it doesn't mix up and they have a proper position which look decent. Lets code the JavaScript part to make the pop up responsive.
JavaScript Code for Popup Window
$(".pop-up").click(function(e){e.stopPropagation();});
$(".response div").click(function(e) {
$("#window-mask").toggleClass("open");
e.stopPropagation();
});
$("main, header, footer").click(function(e) {
$("#window-mask").toggleClass("open");
e.stopPropagation();
});
In this JavaScript Code we have defined the pop up and response as click function and set it when to open and when to stop the propagation for the header and footer. Let us now see the final output for the project.
We have Successfully created our Automatic Popup Window using HTML, CSS & JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Written By – Harsh Sawant
Code By – @harshh9
Top comments (0)