Pre-requisites to Make Automatic Show Popup After load using CSS & JS
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 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.
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;
}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.
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.
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
<!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>@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
