Click here to preview...
STYLE.CSS code
.popup-overlay {
background: rgba(0, 0, 0, 0.8);
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
display: none;
}
.popup-container {
max-width: 500px;
margin: 0 auto;
margin-top: 200px;
font-family: "Roboto", sans-serif;
background-image: linear-gradient(
to right top,
#55eee8,
#2df2cc,
#45f4a1,
#76f269,
#a8eb12
);
padding: 24px;
border-radius: 24px;
position: relative;
box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}
.popup-close {
position: absolute;
top: -10px;
right: -10px;
background: #c00303;
color: #ecf0f1;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 30px;
font-weight: bold;
transform: rotateZ(45deg);
cursor: pointer;
}
.popup-title {
font-size: 36px;
text-align: center;
color: #c00303;
}
.popup-description {
font-size: 20px;
text-align: center;
}
.popup-button {
background: #110224;
color: #ecf0f1;
text-decoration: none;
font-size: 20px;
padding: 16px 48px;
border-radius: 8px;
margin: 0 auto;
display: block;
width: 80px;
text-align: center;
margin-top: 32px;
}
Step 3: Copy the style.css code
Step 4: Paste it in the template css section, above ]]></b:skin>
HTML code
<!-- html code of Responsive Custom Popup start-->
<div class="popup-overlay">
<div class="popup-container">
<div class="popup-close">+</div>
<h2 class="popup-title">Hurry!! Limited Time Offer!</h2>
<p class="popup-description">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe culpa
non suscipit at, ut quia!
</p>
<a href="#" class="popup-button">Buy Now</a>
</div>
</div>
<!-- html code of Responsive Custom Popup end-->
Step 5: Copy the above HTML code and paste it into the body section of template before </body>
Java script code
<!-- Java script code of Custom Popup start-->
const popupOverlay = document.querySelector(".popup-overlay");
const popupClose = document.querySelector(".popup-close");
popupClose.addEventListener("click", () => {
popupOverlay.style.display = "none";
localStorage.setItem("popupDisplayed", "true");
});
setTimeout(() => {
if (!localStorage.getItem("popupDisplayed")) {
popupOverlay.style.display = "block";
}
}, 3000);
Step 6: Copy the above java script code
Step 7: Paste the code inside body before </body>
Customize
Change pop-up time:
let maxAge = ";max-age=10";
change the value 10 to whatever you want. 10 represent the sec after which the website refreshes to show it again.
Click here to go to the above section of code.
Time for pop-up to show after the page load
setTimeout(() => {
displayModal();
}, 2000);
Here 2000=2sec. Change accordingly.
Click here to go to the above section of code.
