31 C
Gujarat
HomecssHow to Make Automatic Show Popup After load in CSS & JS

How to Make Automatic Show Popup After load in CSS & JS

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.

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

Check out the video reference here:

You may also like:

Rocoderes
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

15,000FansLike
5,000FollowersFollow
535FollowersFollow
- Advertisment -spot_img

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Most Popular