How to Create Automatic Popup Window using HTML & JavaScript Code

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.

What is automatic pop-up window HTML?

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.

50+ HTML, CSS & JavaScript Projects With Source Code

HTML Code :

<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.

Simple Portfolio Website Using Html And Css With Source Code

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:

#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 will be easy and efficient. So follow the steps given below.

Restaurant Website Using HTML and CSS

STEP 1: First, We call out the class name popup-onload and add properties like width, margin, display, position and z-index for alignments, fixing of positions for fixed content and displaying none of the contents.

Second, We call out the second class name and add the exact properties of the first div class and here the additional properties is just min-width, background, and box-shadow to make 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 paragraphs that are 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.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

JavaScript Code(jQuery):

$(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;
});
});

Explanation of Javascript code:

• The First part of JS is creating and declaring an HTML element inside of JS and storing it in an overlay variable. and assigning the content with append JS property.
• Now call the div class and print the show() method to display the box with the message.
• The Second Part is When we click on an empty area of the webpage then the popup box will disappear.
• The Last part again calls out a specific div class and adds a method for it like append, hide, and remove which would act when we click close. the act contains the closing of the 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.

Final Output Of Automatic Popup Window

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 this Blog helpful, then make sure to search codewithrandom 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