Derrick Stewart Derrick Stewart - 23 days ago 11
Javascript Question

Click to close div

I'm using an ad block detector script and would like to make it a bit more user-friendly. Using the following, what script/code do I need to allow the user to click the div to close it?

<!DOCTYPE html>
<html lang="en">
<head>
<title>Detect Adblock - Most effective way to detect ad blockers</title>
</head>
<body>

<style>
#iQGIuEqKgDvV {
display: none;
margin-bottom: 30px;
padding: 20px 10px;
background: #D30000;
text-align: center;
font-weight: bold;
color: #fff;
border-radius: 5px;
}
</style>

<div id="iQGIuEqKgDvV">
Our website is made possible by displaying online advertisements to our visitors.<br>
Please consider supporting us by disabling your ad blocker.
</div>

<script src="/ads.js" type="text/javascript"></script>
<script type="text/javascript">

if(!document.getElementById('Ad-Detect-js')){
document.getElementById('iQGIuEqKgDvV').style.display='block';
}

</script>

</body>
</html>

Answer

How about this solution. Hope it helps!

var slideSource = document.getElementById('slideSource');
document.getElementById('handle').onclick = function(){
  if(!document.getElementById('Ad-Detect-js')){
  	slideSource.className = slideSource.className ? 'fade' : 'fade';
  }
}
div#slideSource {
opacity:1;
transition: opacity 1s; 
display: block;
    margin-bottom: 30px;
    padding: 20px 10px;
    background: #D30000;
    text-align: center;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
}

div#slideSource.fade {
opacity:0;
}
 <div id="handle">
    <div id="slideSource">  Our website is made possible by displaying online advertisements to our visitors.<br>
      Please consider supporting us by disabling your ad blocker.
      </div>
    </div>