Simple Automatic Popup Window using JavaScript

Automatic Popup Window in JavaScript

Do you want to create an Automatic Popup Window using JavaScript?

OK, in this article you will learn how to create JavaScript Automatic Popup Window. Popup box is a popular element for any webpage. In many places, this type of modal box is used to show any information to the user.

Suppose you ask a user to subscribe to your website. In that case, you can use this type of Automatic Popup box. In many other cases such as login forms, newsletters, ads, etc. What is needed to create this Automatic Popup Window

   ✅  Basic structure by HTML

   ✅  Need to design by CSS

   ✅  JavaScript to activate the popup

Do you think this type of Automatic Popup Window JavaScript is very difficult to create
In fact, you can build it using simple code.

Create Automatic Popup Window in JavaScript

The design made in this article is made by HTML, CSS, and javascript. I have created many popup boxes before without using JavaScript. However, using JavaScript will make this task much easier. You can customize it as you popup.

See the Pen Untitled by Ground Tutorial (@groundtutorial) on CodePen.


If you want to create an Automatic Popup Window and want a step-by-step tutorial then keep reading till the end of the article. After each step here, I have shown the possible results with screenshots.

1. Make a box on the webpage

I first created a basic box using the following HTML codes. All the information can be found in this box. And it will act as a pop-up box.


<div class="popup">

</div>

Some amount of CSS has been used here to design the webpage. White color has been used in the background of the box. 

Depending on the width of the box: 420px and height padding: 30px 40px. Box-shadow has been used to enhance beauty.


Here I have used display: none. As a result, this box cannot be viewed under normal circumstances. The image below is just to show what changes can be made using these codes.

*,
*: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);
}

Make a box on the webpage

2. Add a profile image in the Popup Window

Added an icon. You can use a profile image instead of this icon. Although I have used this content for design. You can remove these contents when you use them in your professional work.


<div class="fab fa-youtube icon1"></div>


.icon1{
  font-size: 60px;
  background: red;
  height: 120px;
  width: 120px;
  color: white;
  border-radius: 50%;
  line-height: 120px;
  text-align: center;
}


Add a profile image in the Popup Window

3. Create a button to cancel the Popup Window

Now you need to create a cancel button. This button allows the user to hide the Automatic Popup Window HTML. You must keep this button even if you use it for your professional work. There is a cross icon on the button.


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


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

Create a button to cancel the Popup Window

3. Headings and some basic text

Now I have added some more information here. In which I first added a heading and then added some basic paragraphs.


<h2> Ground Tutorial </h2>
<p>Lorem, ipsum dolor sit amet .... iure qui</p>



h2{
  margin-top: 10px;
  font-size: 25px;
}

.popup p{
  font-size: 14px;
  text-align: justify;
  margin: 20px 0;
  line-height: 25px;
}

Headings and some basic text

4. Created a simple button

Now I have created a simple button here. This button is for design only. You can remove these contents while using them in your profession. The button depends on width: 150px and height padding: 10px 0.


<a href="#">Subscribe Here</a>


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;
}

Automatic Popup Window using JavaScript

5. JavaScript of the Automatic Popup Window

We have designed the above. Now is the time to make it work. Some basic amounts of JavaScript have been used to make it work. Whether you know Basic JavaScript or not, you can understand.

   ✅ The 'load' function is used here. This means that the following codes will work when your webpage is loaded.
   ✅ Conditions have been added to 'setTimeout' here. And here the time is set to 2000 milliseconds.

   ✅ Here '.popup' has 'display = block'. As a result, we see the popup box.


As a result of using 2000, you will see the Popup Window after 2 seconds. If you want to see the Automatic Popup Window after 3 seconds, then use 3000 milliseconds.


window.addEventListener("load", function(){
  setTimeout(
    function open(event){
       document.querySelector(".popup").style.display = "block";
    },
     2000
  )
});


Now the close button has been activated. Simple 'display = none' is used here. When you click on the button, it will be 'display = none' and the Automatic Popup Window will be hidden.


document.querySelector("#close").addEventListener("click", function(){
  document.querySelector(".popup").style.display = "none";
});

You may have problems copying the above codes and assembling them together. So below I have provided a download button. Using this button you can download the code to create Automatic Popup Window javascript.

First, follow the tutor above and find out how it was created. Then download the codes directly using the button below. We hope you find out from this tutorial how Automatic Popup Window is created using JavaScript.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha...
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code:...
Read more

How To Limit Character In Input Field using JavaScript

Image
Limit Character is a common feature in the input box. Whenever we see this type of JavaScript Character Limit in the input box of any type of website. The biggest example of this is Twitter. Here I have created a limit character input box. Html, CSS, and javascript are used to create. Although you can create Limit Character using the max length attribute of HTML. Limit Character In Input Field However, even if you use the maxlength attribute , you will not be able to input more than that limit in the input box. But in this case, you can input as much as you want. When your input character exceeds the limit, a kind of error will appear. Here I have used the Character's limit of 50. When you input more than 50 characters, the color of the border will change. See the Pen Untitled by Shantanu Jana ( @shantanu-jana ) on CodePen . As you can see above, this is a simple Javascript Limit Characters . A box has been created on the webpage. An input box has been created i...
Read more