Detect AdBlock Using JavaScript and Show Adblocker Indication in modal popup using Bootstrap and jQuery
AdBlocking severely affects those who are running the site by only depending on ads revenue. Here is the way to detect AdBlock with JavaScript and show Adblocker Indication in modal popup using Bootstrap and jQuery.
Following script will detect if user has enabled the AdBlocker in his browser. If user has enabled the AdBlocker, then the AdBlocker will set the height of the <div> with class ‘adsbox’ to zero/auto.
So when <div> offsetHeight is zero/auto, we will trigger the modal popup to show Indication to the user to disable AdBlocker for our site.
/* Adblock */
$(document).ready(function(){
(function(){
var adBlockFlag = document.createElement('div');
adBlockFlag.innerHTML = ' ';
adBlockFlag.className = 'adsbox';
$('body').append(adBlockFlag);
window.setTimeout(function() {
if (adBlockFlag.offsetHeight === 0) {
showAdBlockPopUp();
$('body').addClass('adblock');
}
adBlockFlag.remove();
}, 100);
function showAdBlockPopUp(){
var adBlockerPopup = $('#adBlockerPopup');
adBlockerPopup.modal({
backdrop: 'static',
keyboard: false
});
adBlockerPopup.modal('show');
}
$(document).on('click', '#adBlockerPopupRefresh', function(){
location.reload();
});
})();
});
/* Adblock */
Next I will show you the integration of this How to Detect Ads Blocker On Your Website, and also show you implementation of Adblocker Indication in bootstrap modal popup using Bootstrap and jQuery.
Step 1: Create index.html file with following basic html in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Detect AdBlock Using JavaScript and Show Adblocker Indication in modal popup using Bootstrap and jQuery</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12">
<div class="main-content">
<h1>
Detect AdBlock Using JavaScript and Show Adblocker Indication in modal popup using Bootstrap and jQuery
</h1>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Step 2: Add following html markup before end of </body> tag. This markup related to modal popup which will be shown to the user, if user have enabled adblocker in his site.
<div class="modal fade" id="adBlockerPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>-->
<h4 class="modal-title text-center" id="myModalLabel">AD BLOCKER DETECTED</h4>
</div>
<div class="modal-body">
<div>
<p>
We have noticed that you have an ad blocker enabled which restricts ads served on the site.
</p>
<p>
Please support us by disabling ad blocker for <a href="http://www.smarttutorials.net/">smarttutorials.net </a> ...
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="adBlockerPopupRefresh">
<i class="fa fa-refresh" aria-hidden="true"></i> Refresh
</button>
</div>
</div>
</div>
</div>
Step 3: Add this simple CSS to style modal popup.
#adBlockerPopup .modal-header{background: #e74c3c;color: #fff;}
#adBlockerPopup .modal-header h4{color: #fff;}
#adBlockerPopup .modal-footer{text-align: center;}
#adBlockerPopup .modal-footer i{color:#fff;padding-right: 5px;}
#adBlockerPopup .modal-footer .btn{border-radius:0px;width: 200px;height: 40px;font-size: 17px;}
Step 4: Finally add the following JavaScript, which will detect AdBlocker, and show the modal popup to the user.
/* Adblock */
$(document).ready(function(){
(function(){
var adBlockFlag = document.createElement('div');
adBlockFlag.innerHTML = ' ';
adBlockFlag.className = 'adsbox';
$('body').append(adBlockFlag);
window.setTimeout(function() {
if (adBlockFlag.offsetHeight === 0) {
showAdBlockPopUp();
$('body').addClass('adblock');
}
adBlockFlag.remove();
}, 100);
function showAdBlockPopUp(){
var adBlockerPopup = $('#adBlockerPopup');
adBlockerPopup.modal({
backdrop: 'static',
keyboard: false
});
adBlockerPopup.modal('show');
}
$(document).on('click', '#adBlockerPopupRefresh', function(){
location.reload();
});
})();
});
/* Adblock */
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
