Click here to preview...
Code of links for the font
<!-- Code of links for the font of Responsive Modal Popup -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- Code of links for the font of Responsive Modal Popup -->
Step 1: Copy the above Code of links for the font.
Step 2: Paste inside the head section of the template.
STYLE.CSS code
/* CSS Responsive Modal Popup */
.modal-overlay {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.4);
pointer-events: none;
opacity: 0;
transition: all 400ms ease;
}
.modal-overlay.active {
opacity: 1;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% - 10px));
z-index: 300;
background: #fff;
min-width: 550px;
font-family: "Roboto", sans-serif;
box-shadow: 0 5px 26px -8px rgba(0, 0, 0, 0.3);
border-radius: 20px;
display: flex;
opacity: 0;
pointer-events: none;
transition: all 400ms ease;
}
.modal.active {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%);
}
.modal .close-btn {
position: absolute;
right: 20px;
top: 20px;
font-size: 20px;
cursor: pointer;
padding: 4px;
}
.modal .left {
background: #242424;
color: #fff;
border-radius: 20px;
box-shadow: 17px 0 17px -8px rgba(0, 0, 0, 0.3);
padding: 24px 16px;
text-align: center;
}
.modal .left h3 {
font-size: 22px;
text-transform: uppercase;
margin: 0;
}
.modal .left h3.sale-text {
font-size: 36px;
}
.modal .left .discount p {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 3px;
color: #ebff00;
margin: 0;
margin-top: 32px;
}
.modal .left .discount .discount-percent {
font-size: 60px;
font-weight: 300;
}
.modal .right {
padding: 32px;
display: flex;
flex-direction: column;
justify-content: center;
}
.modal .right h2 {
margin: 0;
text-transform: uppercase;
font-size: 24px;
}
.modal .right p {
color: #222;
}
.modal .right .discount-btn {
text-decoration: none;
background: #ff5555;
align-self: flex-start;
padding: 8px 32px;
color: #fff;
text-transform: uppercase;
font-weight: bold;
border-radius: 20px;
}
.modal .bg-shape {
position: absolute;
height: 12px;
width: 40%;
background: linear-gradient(180deg, #04b6c1 0%, #0e8a91 100%);
border-radius: 20px 20px 0 0;
top: -12px;
left: 40%;
}
@media (max-width: 600px) {
.modal {
flex-direction: column;
min-width: 300px;
}
.modal .bg-shape {
display: none;
}
.modal .close-btn {
color: #eee;
right: 8px;
top: 8px;
}
.modal .left .discount-text {
display: flex;
gap: 8px;
justify-content: center;
}
.modal .left h3,
.modal .left h3.sale-text {
font-size: 24px;
}
.modal .left .discount p {
margin-top: 20px;
}
.modal .right {
padding: 24px;
text-align: center;
}
.modal .right h2 {
text-transform: none;
}
.modal .right h2 br {
display: none;
}
.modal .right .discount-btn {
align-self: auto;
}
}
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 Modal Popup start-->
<div class="modal-overlay"></div>
<div class="modal">
<div class="bg-shape"></div>
<div class="close-btn">
<i class="fa-solid fa-xmark"></i>
</div>
<div class="left">
<div class="discount-text">
<h3>Special</h3>
<h3 class="sale-text">Sale</h3>
</div>
<div class="discount">
<p>Save up to</p>
<div class="discount-percent">45%</div>
</div>
</div>
<div class="right">
<h2>
Get access to the <br />
best books on Designing
</h2>
<p>Click below</p>
<a href="#" class="discount-btn">Get Discount!</a>
</div>
</div>
<!-- html code of Responsive Modal 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 Responsive Modal Popup start-->
const modal = document.querySelector(".modal");
const modalOverlay = document.querySelector(".modal-overlay");
const closeBtn = document.querySelector(".modal .close-btn");
const discountBtn = document.querySelector(".modal .discount-btn");
const createCookie = () => {
let maxAge = ";max-age=10";
let path = ";path=/";
document.cookie = "live-blogger-popup=displayed" + maxAge + path;
};
const displayModal = () => {
if (document.cookie.indexOf("live-blogger-popup") == -1) {
modal.classList.add("active");
modalOverlay.classList.add("active");
createCookie();
}
};
setTimeout(() => {
displayModal();
}, 2000);
closeBtn.addEventListener("click", () => {
modal.classList.remove("active");
modalOverlay.classList.remove("active");
});
discountBtn.addEventListener("click", () => {
modal.classList.remove("active");
modalOverlay.classList.remove("active");
});
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.
