codemediaweb.com

Code Media

hire me

Simple Automatic Popup Window Using HTML and CSS

by

Automatic Popup Window is currently seen on most web pages. This tutorial will help you to know how to create Popup Window using HTML CSS and javascript.

Automatic Popup Window HTML is used for various purposes. Mostly used for subscription forms or newsletters. It also uses the Automatic Popup box to display different types of ads.

Automatic pop up window HTML
Demo
Download

You may be thinking that it is very difficult to create this kind of automatic pop-up window HTML. Not really. You can create it using a little bit of code.

This HTML popup window cannot be opened with onclick. Only this window will open automatically. But before that, I have shared a tutorial that can be opened manually by clicking on a button.

I made this popup window as a demo. That means I just made a popup window and gave some basic information. You can change the information as you like and use it in any of your professional work. 

Here the window will open automatically after a certain time. Here is the setTimeout of how long it will take for this window to open. Since it is a popup window, it is mandatory to have a cancel button here. Yes, there is a Cancel button to hide this HTML popup window.

Step 1:

Automatic pop up window HTML Code

All the information in this Html popup form has been added by the following HTML. First I created a box that would act as a popup window. 

There is a cancel button and some basic information. Basic information you can change as you like. However, the cancel button must be kept.

<div class=”popup”>
   <div class=”fab fa-youtube icon1″></div>
<!– cancel button –>
   <button id=”close”>&times;</button>
    <h2> Code Media </h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita distinctio fugiat alias iure qui,</p>
    <a href=”#”>Subscribe Here</a>
</div>

Step 2:

Design the Popup Window with CSS

Some CSS is needed to design modal popups. The following CSS has been used to design the Automatic Popup Window and some of its basic information.

Blue color has been used in the background of the webpage. Window width: 420px, background-color: #ffffff and display: none are used. This display HTML popup form will not be visible under normal conditions as a result of using display: none.

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #8fbaec;
}
.popup{
  background-color: #ffffff;
  width: 420px;
  padding: 30px 40px;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  border-radius: 8px;
  font-family: “Poppins”,sans-serif;
  display: none;
  text-align: center;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
h2{
  margin-top: 10px;
  font-size: 25px;
}
.popup button{
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px 10px auto;
  background-color: transparent;
  font-size: 30px;
  color: #ffffff;
  background: #03549a;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  border: none;
  outline: none;
  cursor: pointer;
}
.popup p{
    font-size: 14px;
    text-align: justify;
    margin: 20px 0;
    line-height: 25px;
}
a{
    display: block;
    width: 150px;
    position: relative;
    margin: 10px auto;
    font-size: 17px;
    text-align: center;
    background-color: red;
    border-radius: 10px;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 0;
}
.icon1{
  font-size: 60px;
  background: red;
  height: 120px;
  width: 120px;
  color: white;
  border-radius: 50%;
  line-height: 120px;
  text-align: center;
}
Step 3:

JavaScript of the Automatic Popup Window

The basic layout and design of Simple Popup Window have been done. Now you need some JavaScript. JavaScript will help you to open this popup window after a certain period of time. How long after the window will open has been added using setTimeout. 

Here I have used 2000 milliseconds using setTimeout. As a result, the HTML popup form can be seen two seconds after opening the page. If you want to see a modal popup after 5 seconds then you can use 5000 here. We know 1 second = 1000 milliseconds.

window.addEventListener(“load”, function(){
//setTimeout() method sets a timer which executes a function once the timer expires
    setTimeout(
        function open(event){
            document.querySelector(“.popup”).style.display = “block”;
        },
        2000 // 1 seconds = 1000 milliseconds
    )
});
//Activate the cancel button
document.querySelector(“#close”).addEventListener(“click”, function(){
    document.querySelector(“.popup”).style.display = “none”;
});

An Automatic Popup Window can be created in a variety of ways. However, I have shown the easiest method here. Without JavaScript, you can create this type of design by react.Js or JQuery if you want.

You can even create a popup box with just HTML CSS if you want. You may be wondering how to create a popup window of CSS only.

Then you can definitely watch that tutorial. Comment on how you like this JavaScript Automatic Popup Window.

Leave a comment