By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
Notification Show More
Latest News
Passing a JavaScript Value Between HTML Pages
Passing a JavaScript Value Between HTML Pages
JavaScript
Compare Objects in an Array
JavaScript Problem: Compare Objects in an Array
JavaScript
Switching Name Order Using Capturing Groups in Regular Expressions
Switching Name Order Using Capturing Groups in Regular Expressions
JavaScript
Shuffling an Array
JavaScript Problem: How to Perform Shuffling an Array
JavaScript
Create a Non-duplicated Collection
JavaScript Problem: Using Set to Create a Non-duplicated Collection
JavaScript
Aa
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > HTML & CSS > How to Make Automatic Show Popup After load
HTML & CSSJavaScript

How to Make Automatic Show Popup After load

Admin
Last updated: 2022/12/03 at 4:21 AM
Admin
Share
9 Min Read
Automatic Show Popup After load

In this article, we have will learn to make Automatic Show Popup After load using CSS & JS. In this we will have a popup with some information, and in this we will add some timeout using JavaScript. We will also design this warning pop-up with the help of HTML and CSS. This will be a very basic and beginner-friendly, So let’s make it step by step.

Contents
Pre-requisites to Make Automatic Show Popup After load using CSS & JSAdding the Popup Card and Default ValuesCustomizing The Popup CardAdding Functionality to The CardAdding Responsiveness to The CardFull Source Code of Automatic Show Popup After load using CSS & JSOutputYou may also like:
Demo

Pre-requisites to Make Automatic Show Popup After load using CSS & JS

  • Basic knowledge of HTML.
  • Basic knowledge of CSS.
  • Good knowledge of JavaScript.

Adding the Popup Card and Default Values

<!DOCTYPE html>

<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Automatic Popup</title>
      <link rel="stylesheet" href="style.css">
      
   </head>
   <body>
      <div class="popup">
         <div class="contentBox">
            <div class="close"></div>
            <div class="imgBx">
               <img src="gift.png" />
            </div>
            <div class="content">
               <div>
                  <h3>Special Offer</h3>
                  <h2>80<sup>%</sup><span>off</span></h2>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                     </p>
                  <a href="#">Get The Deal</a>
               </div>
            </div>
         </div>
      </div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  min-height: 100vh;
  background: #6cb1ff;
}

In HTML, we will add our stylesheet in the index.html. Then we have added a div for popup card, in this we have added contentBox div. This div will have an image of cross sign, we added our close.png here. Then we have added an image of the gift. Also, we have added some description about the sale. Lastly, we have added an anchor text here.

In CSS, we have firstly added our Poppins font, which is easily available on the Google. Then after, we have reset the default margin and padding, After that we have gave minimum height of our body part with #6cb1ff color.

Automatic Show Popup After load

Customizing The Popup Card

.popup{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.contentBox{
  width: 600px;
  height: 400px;
  position: relative;
  background: #fff;
  border-radius: 20px;
  display: flex;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
}
.contentBox .imgBx{
  position: relative;
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentBox .imgBx::before{
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  background: #e7ffe0;
  border-radius: 50%;
}

.contentBox .imgBx img{
  position: relative;
  max-width: 250px;
  z-index: 1;
}

.contentBox .content{
  position: relative;
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentBox .content h3{
  color: #333;
  line-height: 1em;
  font-weight: 300;
  font-size: 2em;
}

.contentBox .content h2{
  font-size: 4em;
  color: #ff4d54;
  line-height: 1em;
}

.contentBox .content h2 span{
  color: #333;
  font-size: 0.75em;
  text-transform: uppercase;
}

.contentBox .content p{
  font-weight: 300;
}

.contentBox .content a{
  display: inline-block;
  padding: 10px 20px;
  background: #ff4d54;
  color: #fff;
  margin-top: 15px;
  text-decoration: none;
  border-radius: 10px;
}

.close{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: #f3f3f3 url(close.png);
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: center;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

Now let’s move on to the CSS part, In this we will customize our card. For the popup field, we have fixed it position, and we have repositioned this field using top and left properties. Then we have placed this card in the center of the screen using transform property.

Then for contentBox, we have provided some height and width to this, then we set relative position to it. Then we have provided some border-radius to get curve at border edges. Also, we have applied some shadow to its border.

Now we have added some basic CSS to fit the image inside the popup card, by changing its width and height. Then we have limited image size to 250px. After that, we have also customized the content with some colors and font-weight . Mainly, we have centered these descriptions and added relative position, So that if we add responsiveness then the card elements won’t get disturbed.

Lastly, we have adjusted our close image with the help of CSS. In this we have added absolute position, and we have applied top, right property, so that it will be stuck at the top of the card. Also, we have restricted the duplication of the image.

We have hid these elements, and we will access these using JavaScript Part.

Automatic Show Popup After load

Adding Functionality to The Card

<script>
         const popup = document.querySelector('.popup');
         const close = document.querySelector('.close');
         window.onload = function(){
            setTimeout(function(){
               popup.style.display = "block"
            },2000)
         }
         close.addEventListener('click', ()=>{
            popup.style.display = "none";
         })
      </script>

Now let’s move to the JavaScript part, In this we have fetched the popup class, close class using querySelector. Now we have added a function when window will get loaded, In this we have set a 2-second timeout, in which we have just displaying our popup block. And for Close, we added a click event, in which we’re just removing the Popup.

Automatic Show Popup After load

Adding Responsiveness to The Card

@media (max-width : 767px)
{
  .contentBox{
    width: 300px;
    height: auto;
    flex-direction: column;
  }
  .contentBox .imgBx{
    height: 200px;
    transform: translateY(-50px);
  }
  .contentBox .content::before{
    background: #fff;
  }
  .contentBox .content{
    height: auto;
    text-align: center;
    padding: 20px;
    padding-top: 0;
  }
  .close{
    top: -50px;
    right: -10px;
    background: #fff url(close.png);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
  }
}

Full Source Code of Automatic Show Popup After load using CSS & JS

index.html

<!DOCTYPE html>

<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Automatic Popup</title>
      <link rel="stylesheet" href="style.css">
      
   </head>
   <body>
      <div class="popup">
         <div class="contentBox">
            <div class="close"></div>
            <div class="imgBx">
               <img src="gift.png" />
            </div>
            <div class="content">
               <div>
                  <h3>Special Offer</h3>
                  <h2>80<sup>%</sup><span>off</span></h2>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                     </p>
                  <a href="#">Get The Deal</a>
               </div>
            </div>
         </div>
      </div>
      <script>
         const popup = document.querySelector('.popup');
         const close = document.querySelector('.close');
         window.onload = function(){
            setTimeout(function(){
               popup.style.display = "block"
            },2000)
         }
         close.addEventListener('click', ()=>{
            popup.style.display = "none";
         })
      </script>
   </body> 
</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  min-height: 100vh;
  background: #6cb1ff;
}

.popup{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.contentBox{
  width: 600px;
  height: 400px;
  position: relative;
  background: #fff;
  border-radius: 20px;
  display: flex;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
}
.contentBox .imgBx{
  position: relative;
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentBox .imgBx::before{
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  background: #e7ffe0;
  border-radius: 50%;
}

.contentBox .imgBx img{
  position: relative;
  max-width: 250px;
  z-index: 1;
}

.contentBox .content{
  position: relative;
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentBox .content h3{
  color: #333;
  line-height: 1em;
  font-weight: 300;
  font-size: 2em;
}

.contentBox .content h2{
  font-size: 4em;
  color: #ff4d54;
  line-height: 1em;
}

.contentBox .content h2 span{
  color: #333;
  font-size: 0.75em;
  text-transform: uppercase;
}

.contentBox .content p{
  font-weight: 300;
}

.contentBox .content a{
  display: inline-block;
  padding: 10px 20px;
  background: #ff4d54;
  color: #fff;
  margin-top: 15px;
  text-decoration: none;
  border-radius: 10px;
}

.close{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: #f3f3f3 url(close.png);
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: center;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

@media (max-width : 767px)
{
  .contentBox{
    width: 300px;
    height: auto;
    flex-direction: column;
  }
  .contentBox .imgBx{
    height: 200px;
    transform: translateY(-50px);
  }
  .contentBox .content::before{
    background: #fff;
  }
  .contentBox .content{
    height: auto;
    text-align: center;
    padding: 20px;
    padding-top: 0;
  }
  .close{
    top: -50px;
    right: -10px;
    background: #fff url(close.png);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
  }
}

Output

Automatic Show Popup After load
Demo
Download Code

Check out the video reference here:

You may also like:

  • How To Build a Quiz App With HTML CSS and JavaScript
  • How To Make Slide Puzzle Game in HTML CSS and JavaScript
  • How To Make Space War Game Using HTML, CSS & JavaScript

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: Animation, Automatic Show Popup After load, popup
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article Custom Warning Alert Notification How to Make Custom Warning Alert Notification in JavaScript
Next Article Popup Login Form How to Make Popup Login Form in HTML, CSS & JavaScript
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

- Advertisement -

You Might Also Like

Passing a JavaScript Value Between HTML Pages

Passing a JavaScript Value Between HTML Pages

February 3, 2023
Compare Objects in an Array

JavaScript Problem: Compare Objects in an Array

January 30, 2023
Switching Name Order Using Capturing Groups in Regular Expressions

Switching Name Order Using Capturing Groups in Regular Expressions

January 29, 2023
Shuffling an Array

JavaScript Problem: How to Perform Shuffling an Array

January 27, 2023
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?