Hey Guys, Welcome To Our Blog, In Today's Blog We Are Going To See How To Create An Automatic Popup Window Using HTML, CSS, and JavaScript. An Automatic Popup Window Is just a pop-up box with some information on it that displays the message during the loading of a webpage.
So Now We are going to create this project for that we are first adding the HTML code.
HTML Code For Automatic Popup Window
<div class='popup-onload'>
<div class='cnt223'>
<p>
We were affected by the fire next door and will remain closed until further notice.
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
First we are creating two div classes with separate class name on it. Then we creating an paragraph tag to add a message that needs to be displayed. and then we are adding an anchor tag with close as option , which means it will close the pop up box when we click close and that is going to done with the help of Javascript.
Lastly we have closed our both div class.
So , The HTML code is completed. Now we go for an CSS to make the pop up box attractive.
CSS Code For Automatic Popup Window
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup-onload{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
The CSS code will be explained in steps so it would be easy and efficient. So follow these steps given below.
STEP 1: First , We calling out the class name popup-onload and adding the properties like width , margin , display , position and z-index for alignments , fixing of positions for fixed content and displaying none of contents.
Second, We calling out the second class name and adding the exact properties of first div class and here the additional properties is just min -width , background , box-shadow for making it attractive.
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.popup-onload{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
STEP 2: The second step involves adding properties for paragraph that displayed in pop up box. The properties were common which is font size , font family and color of the text.
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
STEP 3: Now the last step involves adding of button to the close option with button CSS properties.
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
Now The CSS part has been completed. So The last one Is javascript for making the auto popup.
JavaScript Code(jQuery) For Automatic Popup Window
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup-onload').show();
$('.close').click(function(){
$('.popup-onload').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
The First part of JS is we are creating and declaring an HTML element inside of JS and store it in overlay variable. and assigning the content with append JS property. Now calling the div class and printing the show() method to display the box with message.
The Second Part is When we click on an empty area of webpage then the popup box would disappear.
The Last part is again we calling out a specific div class and adding a method for it like append , hide and remove which would act when we click close. the act contains closing of popup.
Now We have successfully completed adding the Source codes for our project. So we will go on to preview our project in the given output section.
Now We have Successfully created our Automatic Popup Window using HTML ,CSS and JavaScript. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.
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.
REFER CODE - Rosy Babu
WRITTEN BY - Ragunathan S
Top comments (0)