By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • 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
Notification Show More
Latest News
How to set the dropdown value by clicking on a table row
Javascript – How to set the dropdown value by clicking on a table row
JavaScript
Attempting to increase the counter, when the object's tag exist
Javascript – Attempting to increase the counter, when the object’s tag exist
JavaScript
Cycle2 JS center active slide
Javascript – Cycle2 JS center active slide
JavaScript
Can import all THREE.js post processing modules as ES6 modules except OutputPass
Javascript – Can import all THREE.js post processing modules as ES6 modules except OutputPass
JavaScript
How to return closest match for an array in Google Sheets Appscript
Javascript – How to return closest match for an array in Google Sheets Appscript
JavaScript
Aa
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

How to set the dropdown value by clicking on a table row

Javascript – How to set the dropdown value by clicking on a table row

February 11, 2024
Attempting to increase the counter, when the object's tag exist

Javascript – Attempting to increase the counter, when the object’s tag exist

February 11, 2024
Cycle2 JS center active slide

Javascript – Cycle2 JS center active slide

February 10, 2024
Can import all THREE.js post processing modules as ES6 modules except OutputPass

Javascript – Can import all THREE.js post processing modules as ES6 modules except OutputPass

February 10, 2024
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?