How to Create Automatic Popup Window using HTML & CSS

In this article, you will learn how to create automatic popup windows using HTML and CSS. This type of CSS automatic popup window is used on various websites to show any information to the user.

 Basically, this kind of design is very helpful for showing subscribe form, newsletter etc. There are two types of popup windows. In some cases, pop-ups can be seen when the user clicks on a button or link. Again in some cases, automatically fixed time intervals are available.

Automatic Popup Window HTML

Below I have given a demo that will help you to know how the automatic popup window works. Here I have taken the help of HTML CSS and a small amount of JavaScript. This design can be found in the automatic popup field and can be hidden again with the Cancel button.

See the Pen Untitled by Code Media (@codemediaweb) on CodePen.

Hopefully, the demo above has helped you to know how it works. First I designed the webpage and then I made a box. Display: none is used for this box so the box cannot be seen. Here are some tests, added headings, and a cancel button. After clicking this button, the box will be hidden again.

How to create an Automatic popup Form in HTML

Below we have shared step-by-step tutorials on how this automatic popup window can be created using HTML. For this, you need to have an idea about basic HTML CSS JavaScript. Below the article is the complete source code. 

There is no reason to worry if you are a beginner. Here you will find the source code and explanation needed to make it.

Step 1: Basic structure of popup box

Created a basic structure of this automatic popup window using the following HTML and CSS code. This box contains all the information. This box relies on width 420px and height padding.

<div class="popup">

</div>

*,

*:before,

*:after{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

body{

    background-color: #0855ae;

}

.popup{

    background-color: #ffffff;

    width: 420px;

    padding: 30px 40px;

    position: absolute;

    transform: translate(-50%,-50%);

    left: 50%;

    top: 50%;

    border-radius: 8px;

    display: none;

    font-family: "Poppins",sans-serif;

    text-align: center;

}

Step 2: Create a button to cancel the box

Now I have made it close button. Clicking on this button will hide the box again. I used a cross mark here and the front size also helped to increase the size of that mark a bit.

<button id="close">&times;</button>

.popup button{

    display: block;

    margin:  0 0 20px auto;

    background-color: transparent;

    font-size: 30px;

    color: #ffffff;

    background: #03549a;

    border-radius: 100%;

    width: 40px;

    height: 40px;

    border: none;

    outline: none;

    cursor: pointer;

}

Step 3: Add information to the Popup Window

I have added some text using the HTML and CSS code below. You can add any text you need here.

<h2>Automatic Pop-Up</h2>

<p>Lorem, ipsum ... dignissimos?</p>

.popup h2{

   margin-top: -20px;

}

.popup p{

    font-size: 14px;

    text-align: justify;

    margin: 20px 0;

    line-height: 25px;

}

Now I have created a button. The button is 15px long and uses text-align: center to center the text.

<a href="#">Let's Go</a>

a{

    display: block;

    width: 150px;

    position: relative;

    margin: 10px auto;

    text-align: center;

    background-color: #0f72e5;

    border-radius: 20px;

    color: #ffffff;

    text-decoration: none;

    padding: 8px 0;

}

Step 4: Activate the Automatic Popup Window using JavaScript

Now I have implemented the popup using some jQuery. Here I have used very simple JavaScript. If you know the basics of JavaScript you can easily understand.

First I added display = "block" using setTimeout. As a result, the box can be seen. I have used 2000 milliseconds here, which means that the box can be seen after 2 seconds of loading the page.

window.addEventListener("load", function(){

    setTimeout(

        function open(event){

            document.querySelector(".popup").style.display = "block";

        },

        1000 

    )

});

I have executed the close button using the following codes. When you click on the close button, the display will be none, that is, it will be completely hidden.

document.querySelector("#close").addEventListener("click", function(){

    document.querySelector(".popup").style.display = "none";

});

HTML Code for Automatic Popup Window

Below is the source code needed to create this auto popup modal. If you are a beginner then the source code below will help you. You can copy them directly from the bottom or download them using the download button below.

See the Pen Untitled by Code Media (@codemediaweb) on CodePen.

Hope you learned from this tutorial how I created this Automatic Popup Window using HTML CSS and JavaScript.

The download will start automatically