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
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
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.
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.
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.
Now I have created a button. The button is 15px long and uses text-align: center to center the text.
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.
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.
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.