Skip to content

Instantly share code, notes, and snippets.

@greenreader9
Last active October 14, 2021 22:11
Show Gist options
  • Save greenreader9/9e6d18c1fb99d9dd324d994c6b3d0060 to your computer and use it in GitHub Desktop.
Save greenreader9/9e6d18c1fb99d9dd324d994c6b3d0060 to your computer and use it in GitHub Desktop.
This simple code detects a ad blockers, and if one is found, it will show a popup, disable scrolling on your website, as well as set the background color to grey! You can use an iframe (Already setup) or use your own HTML code for the popup. Unconvinced? Check out the demo: https://codepen.io/greenreader9/pen/wveVpjv
<!DOCTYPE html>
<!-- TO INTEGRATE ME INTO YOUR WEBSITE, COPY THE DIV WITH THE CLASS "Modal", THE CSS, AND THE JAVSCRIPT AT THE END -->
<!-- licensed under the Creative Commons Attribution 4.0 International license (https://creativecommons.org/licenses/by/4.0/) -->
<html>
<head>
<style>
#Modal {
display: none;
position: absolute;
background-color: #fe;
margin: auto;
padding: 0;
border: 2px solid #888;
width: 85%;
height: 80%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
float: left;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
iframe{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="Modal">
<!-- SET THE URL TO SHOW IN THE POPUP HERE -->
<!-- ALTHERNATIVLY, YOU CAN REPLACE THE <iframe> WITH YOUR OWN CODE -->
<!-- ANYHTING INSIDE THE "Modal" DIV WILL BE SHOWN IN THE POPUP MENU -->
<iframe src="https://google.com" title="Ad-Blocker Detected!"></iframe>
</div>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<h2>Just some text so one can see that stuff is actually in the background</h2>
<script>
var modal = document.getElementById("Modal");
//Credit to: jonathanmh.com/how-to-detect-ad-blockers-adblock-ublock-etc/
//Thanks for this amazing code!
//If you use this please make sure to give credit!
window.addEventListener("load", function () {
let testReq = new Request(
"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
{
method: "HEAD",
mode: "no-cors"
}
);
fetch(testReq).then(response => {
modal.style.display = "none";
}).catch(error => {
modal.style.display = "block";
document.getElementById('defaultOpen')?.click();
window.onscroll = function () { window.scroll(0, 0); };
document.body.style.overflow = "hidden";
document.body.style.backgroundColor = "#cccc";
window.addEventListener(`contextmenu`, (e) => e.preventDefault());
document.addEventListener('contextmenu', event => event.preventDefault());
});
});
</script>
</body>
</html>
@greenreader9
Copy link
Author

Unconvinced? Check out the demo: https://codepen.io/greenreader9/pen/wveVpjv

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment