Looking for a smart way to improve engagement on your website? This free Advance Popup Script is designed for website owners who want safe interaction without risking their AdSense account. Created with HTML, CSS, and JavaScript, it’s simple, fast, and effective. With this script, you can highlight your sponsor section in a safe way.
This Advance Popup Script is built using web technologies like HTML, CSS, and JS. It helps website owners show a stylish popup to visitors with sponsor content. The script is optimized for speed and performance, ensuring your site stays fast while engaging users. It’s cookie-based, which means your users won’t see the popup every time.
Using this script is completely free. It is designed to be user-friendly, so even beginners can add it to their website in minutes. Many website owners use it to improve engagement safely without compromising their ads account.
Table of Contents
Type 1: Simple Popup Ad Script
The first version is a classic popup overlay that appears after a few seconds when a visitor lands on your page. It features a clean design with a title, sponsor area, and close button.
Features:- Simple and responsive design
- Works on mobile and desktop
- Easy to customize header, ad, and styles
- Popup shows automatically after a set time
- Copy the CSS, HTML, and JS code provided below.
- Paste this code website before the closing
</body>tag OR Paste this code any particular page - Customize the ad code and And paste your ad code between these two comments.
<!-- Put your ads code below -->
<!-- Put your ads code above --> - Save it and use it
<div class="popup-overlay" id="popup">
<div class="popup-box">
<div class="popup-header">Support the Developer ❤️</div>
<span class="popup-close" onclick="document.getElementById('popup').style.display='none'">×</span>
<div class="popup-content">
<p>Click on the sponsor ad below to continue browsing 👇</p>
<div class="popup-ad">
<!-- Put your ads code below-->
<!-- Put your ads code above-->
</div>
</div>
</div>
</div>
<style>
.popup-overlay{
position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;justify-content:center;
z-index:9999
}
.popup-box{
background:#fff;width:90%;max-width:600px;
border-radius:10px;overflow:hidden;
position:relative;box-shadow:0 4px 15px rgba(0,0,0,0.3)
}
.popup-header{
padding:10px;background:#000000;color:#fff;
font-size:18px;font-weight:bold;text-align:center
}
.popup-content{padding:20px;text-align:center}
.popup-close{
position:absolute;top:10px;right:15px;cursor:pointer;
font-size:20px;color:#ccc
}
.popup-ad{
border:2px dashed #ddd;padding:10px;margin-top:15px
}
@media(min-width:768px){
.popup-box{max-width:900px; height:auto}
}
</style>
<script>
setTimeout(function(){
document.getElementById("popup").style.display="flex";
},10000);
</script>Type 2: Styled Popup With Top Close Button
This version has a modern look with a top cut button and a centered ad. It is perfect for websites that want a sleek and minimal design without distracting users too much.
Features:- Responsive design for all screen sizes
- Close button with hover effect
- Ad clickable area with smooth layout
- Easy to change ad image and link
- Copy the full CSS, HTML, and JS.
- Paste this code website before the closing
</body>tag OR Paste this code any particular page - Customize the ad code and And paste your ad code between these two comments.
<!-- Put your ads code below -->
<!-- Put your ads code above --> - Save it and use it
<div class="popup-overlay" id="popup">
<span class="popup-close" id="closeBtn">✕</span> <!-- Top Cut Button -->
<div class="popup-box">
<div class="popup-content">
<!-- Put your ads code below-->
<!-- Put your ads code above-->
</div>
</div>
</div>
<style>
.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:9999}
.popup-box{background:#fff;width:90%;max-width:600px;border-radius:10px;overflow:hidden;position:relative;box-shadow:0 4px 12px rgba(0,0,0,0.3);min-height:220px}
.popup-close{position:absolute;top:15px;right:20px;font-size:26px;font-weight:bold;font-family:Arial,sans-serif;color:#fff;cursor:pointer;z-index:10000;background:rgba(0,0,0,0.5);border-radius:50%;padding:2px 9px;transition:0.2s}
.popup-close:hover{background:red;color:#fff}
.popup-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
@media(max-width:600px){.popup-box{width:95%;min-height:180px}
.popup-close{font-size:22px;top:10px;right:15px}
}
</style>
<script>
window.onload=function(){
setTimeout(()=>{document.getElementById("popup").style.display="flex";},10000);
};
document.getElementById("closeBtn").onclick=function(){
document.getElementById("popup").style.display="none";
};
</script>Type 3: Click-Count Popup Script
The third type is an interactive popup where the visitor must click the ad a certain number of times (2 or 3) to unlock the close button. This is a popup Ad Script for better engagement.
Features:- Counts user clicks and updates status
- Close button appears after required clicks
- Fully responsive and modern design
- Prevents accidental closure before engagement
- Copy CSS, HTML, and JS code.
- Add this code just before
</body>tag on your site. OR Paste this code any particular page - Customize the ad code and And paste your ad code between these two comments.
<!-- Put your ads code below -->
<!-- Put your ads code above --> - Save it and use it
<div class="popup-overlay" id="popup">
<div class="popup-box">
<div class="popup-header">Support the Developer ❤️</div>
<span class="popup-close" id="popupClose"><b>ⓧ</b></span>
<div class="popup-content">
<p>👉 Please click on the sponsor ad <b>2 times</b> to continue 👇</p>
<div id="popupStatus" class="popup-status">0 / 2 Ads clicked</div>
<div class="popup-ad">
<!-- Put your ads code below-->
<!-- Put your ads code above-->
</div>
</div>
</div>
</div>
<style>
.popup-overlay{
position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(0,0,0,0.6);
display:none;align-items:center;justify-content:center;
z-index:9999
}
.popup-box{
background:#fff;width:90%;max-width:600px;
border-radius:10px;overflow:hidden;
position:relative;box-shadow:0 4px 15px rgba(0,0,0,0.3)
}
.popup-header{
padding:10px;background:#000;color:#fff;
font-size:15px;font-weight:bold;text-align:center
}
.popup-content{padding:20px;text-align:center}
.popup-status{margin:10px 0;font-weight:bold;font-size:18px;color:#333}
.popup-close{ position:absolute;top:0px;right:1px;cursor:pointer;
font-size:20px;color:#ccc;padding:5px 10px; display:none;transition:0.3s
}
.popup-ad{
border:2px dashed #ddd;padding:15px;margin-top:15px
}
@media(min-width:400px){
.popup-box{max-width:400px;height:auto}
}
</style>
<script>
let clickCount = 0;
const totalClicks = 2;
function adClicked(){
if(clickCount < totalClicks){
clickCount++;
document.getElementById("popupStatus").innerText = clickCount+" / "+totalClicks+" Ads clicked";
}
if(clickCount >= totalClicks){
document.getElementById("popupClose").style.display = "block";
}
}
setTimeout(function(){
document.getElementById("popup").style.display="flex";
},10000);
document.getElementById("popupClose").addEventListener("click",function(){
document.getElementById("popup").style.display="none";
});
</script>Type 4: Advanced Click Popup Script
Advanced Click Popup Script. This will be shown to the user only one time. It will not appear again until the user clears their browser data. Even if the user refreshes or does anything else, they will see it only this one time. I recommend using this one in your theme as it is the safest and the best. As for the other three, you can use them in your posts because they will reappear after 10 seconds if the page is refreshed.
Features:
- One-time display: Shown to the user only once.
- Browser storage based: Won’t appear again until browser data is cleared.
- Refresh safe: Won’t show even if the page is refreshed.
- Theme-friendly: Safe and reliable for use across the theme.
- Non-intrusive: Appears only once, no repeated interruptions.
How to Install:
- Copy the CSS, HTML, and JS code provided below.
- Paste it into your website before the closing
</body>tag. - Customize the ad code and And paste your ad code between these two comments.
<!-- Put your ads code below -->
<!-- Put your ads code above --> - Save it and use it
<div class="popup-overlay" id="popup">
<div class="popup-box">
<div class="popup-header">Support the Developer ❤️</div>
<span class="popup-close" onclick="document.getElementById('popup').style.display='none'">×</span>
<div class="popup-content">
<p>Click on the sponsor ad below to continue browsing 👇</p>
<div class="popup-ad">
<!-- Put your ads code below-->
<!-- Put your ads code above-->
</div>
</div>
</div>
</div>
<style>
.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:9999;display:none;}
.popup-box{background:#fff;max-width:600px;width:90%;border-radius:10px;overflow:hidden;position:relative;box-shadow:0 4px 15px rgba(0,0,0,0.3)}
.popup-header{padding:10px;background:#f44336;color:#fff;font-size:18px;font-weight:bold;text-align:center}
.popup-content{padding:20px;text-align:center}
.popup-close{position:absolute;top:10px;right:15px;cursor:pointer;font-size:20px;color:#333}
.popup-ad{border:2px dashed #ddd;padding:15px;margin-top:15px}
</style>
<script>
// Auto show popup after 10 seconds with localStorage check
if(!localStorage.getItem("popupShown")){
setTimeout(function(){
document.getElementById("popup").style.display="flex";
localStorage.setItem("popupShown","true");
}, 10000); // 10000 milliseconds = 10 seconds
}
</script>Warning!
You can use this code at your own risk. If this code is misused, it may lead to an AdSense violation. Therefore, use it responsibly and at your own risk. If used correctly, it is safe. Please make sure to read and fully understand the Google AdSense guidelines before implementing this code.
Related Posts
FAQs
What is Advanced Click Popup Script?
The Advanced Click Popup Script is a popup ad tool created using HTML, CSS, and JavaScript that encourages users to interact with ads safely on your website.
How does it help increase ad revenue?
This popup script engages visitors by showing stylish ads and interactive popups, leading to more ad clicks and higher revenue without violating AdSense policies.
Is Advanced Click Popup Script safe for AdSense?
Yes, the script is designed to dynamically change ad units and limit repeated popups, keeping your AdSense account safe while increasing engagement.
Can I customize the popup design?
Absolutely! You can modify the ad image, link, header text, styling, and popup timing to match your website’s design and branding.
Final Thought
This Free Advanced Click Popup Script is a simple, effective tool for boosting ad engagement. Install it today and see how it can improve your website revenue without compromising user experience.
