Last active
October 14, 2021 22:11
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Unconvinced? Check out the demo: https://codepen.io/greenreader9/pen/wveVpjv