0

I'm trying to make a Dialog in my website using css3 which pops up if the user is using adblock. The dialog basically asks the user to enable ads on my website but I don't want to annoy the user with the dialog popping up each time he/she visits my website so i want to give the user a "Dont show me again" option but i have no idea how to implement this.

Here is an image of the dialog

enter image description here

This is the java script code that detects the adblock user and opens the dialog

<script> window.setTimeout(function(){
  if(adsbygoogle instanceof Array) {

    // adsbygoogle.js did not execute; probably blocked by an ad blocker
    window.location = '#PleaseUnblock'

  } else {
        // adsbygoogle.js executed 
    }
 }, 2000); 
</script>

This is html code for the dialog 

       <div id="PleaseUnblock" class="modalDialog">
         <div style="margin-top: 70px;padding: 5px 12px 13px 15px;width: 380px;">
            <a href="#" title="Close" class="close">X</a>
            <div style="padding: 0; margin: 0;">
               <h1 class="ad-di-title">You Are Using AdBlock &#58;&#40;</h1>
            </div> 
            <div style="margin-left: auto;margin-right: auto;width: 350px;height: 332px;background: url(/assets/please.jpg);background-size: 350px;background-repeat: no-repeat"></div>
            <p class="ad-di-para" style="margin-bottom: 3px;">All content made on WEBSITENAME is free. As you use Adblock, we wont get any revenue  from the content we make. We promise that we will not show annoying ads and we only ask you to enable ads in our site.</p>
             <a style="margin-left: 300px" href="#" class="kbtn">Ok</a>
         </div> 
       </div>
edwinj
  • 430
  • 3
  • 14

1 Answers1

3

A fairly simple solution using cookies:

function askLater() {
    var d = new Date();
    d.setTime(d.getTime() + (86400000)); //set the time to 24 hours later
    var expires = "expires="+d.toUTCString();
    document.cookie = "dontAsk=true; " + expires;
}

Call the function askLater() if the user presses the "Don't ask me again" button.

Then, test for the cookie dontAsk in your code, for instance:

if(adsbygoogle instanceof Array && document.cookie.indexOf("dontAsk") == -1) {
    // indexOf is -1 when string not found, so the cookie is unset

    // adsbygoogle.js did not execute; probably blocked by an ad blocker
    window.location = '#PleaseUnblock'

} else { ... }

If you want to never ask again, use this instead:

function neverAsk() {
    document.cookie="dontAsk=true";

As simple as that.

Petzku
  • 251
  • 1
  • 4