MyBB Community Forums

Team, 

I lost around 12% of revenue before I installed this script. This script is affective, and I recommend installing it and tweaking it on your forum. I'm a beginner coder if you follow my work. So, you probably will have better luck with it. Do as instructed and it will work. You can see the demo below or visit my signature. This script is mad annoying right now. I will be changing the script to interact with user-groups. 

The popup will not go away until your adblocker is turned off. It will continue to be active. I'm in the process of adding user-group permissions.



Add code to bottom of HeaderInclude: 

<!-- Adblock Code -->
  <div id="detect"></div>
  <div class="wrapper2">
	  <div class="cn-bg-effect show"></div>
    <div class="content2">
      <div class="warn-icon">
        <span class="icon"><i class="fas fa-exclamation"></i></span>
      </div>
      <h2>AdBlock Detected!</h2>
      <p>Our website is made possible by displaying ads to our visitors. Please support us by turning off your adblocker!</p>
      <div class="btn">
        <div class="bg-layer"></div>
        <button>Okay, I'll Whitelist</button>
      </div>
    </div>
  </div>
  <script>
    const detect = document.querySelector("#detect");
    const wrapper = document.querySelector(".wrapper2");
    const button = wrapper.querySelector("button");
    let adClasses = ["ad", "ads", "adsbox", "doubleclick", "ad-placement", "ad-placeholder", "adbadge", "BannerAd"];
    for(let item of adClasses){
      detect.classList.add(item);
    }
    let getProperty = window.getComputedStyle(detect).getPropertyValue("display");
    if(!wrapper.classList.contains("show")){
      getProperty == "none" ? wrapper.classList.add("show") : wrapper.classList.remove("show");
    }
	  
    button.addEventListener("click", ()=>{
      wrapper.classList.remove("show");

});
  </script>
	
<script type="text/javascript">  
    jQuery(document).ready(function($) (  
    {  
        $('#detect').addFloating(  
            {  
                targetRight: 10,  
                targetTop: 10,  
                snap: true  
            });  
    });  
</script> 

<!-- Adblock Code  -->

Now paste this in bottom of your Global.Css 
THIS WON'T INTERFERE WITH THEME.

<!-- Adblock Code -->

::selection{
  color: #fff;
  background: #9b27ca;
}
.wrapper2{
  position: fixed; 
  max-width: 480px;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 40px 30px;
  background: #1c203c;
  border-radius: 15px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 10px 10px 15px rgba(0,0,0,0.06);
  transition: opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
}
.wrapper2.show{
  opacity: 1;
  pointer-events: auto;
  transform:translate(-50%, -50%) scale(1);
	 z-index: 1;
  <!--   position: absolute; -->
}

.wrapper2 .content,
.content2 .warn-icon,
.warn-icon .icon{
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper2 .content{
  flex-direction: column;
}
.content2 .warn-icon{
  height: 115px;
  width: 115px;
  border-radius: 50%;
  background: linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
}
.warn-icon .icon{
  height: 100px;
  width: 100px;
  background: #fff;
  border-radius: inherit;
}
.warn-icon .icon i{
  background: linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 50px;
}
.content2 h2{
  margin-top: 35px;
  font-size: 32px;
}
.content2 p{
  font-size: 19px;
  text-align: center;
  margin-top: 20px;
}
.btn{
  height: 57px;
  width: 223px;
  margin-top: 30px;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
}
.btn .bg-layer{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(135deg, #9b27ca, #d33639, #9b27ca, #d33639);
  transition: all 0.4s ease;
}
.btn:hover .bg-layer{
  left: 0;
}
.content2 button{
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: none;
  font-size: 18px;
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
}

There is two Javascripts in here.
- One makes the div scroll.
- One Makes the pop up.

Could you make for like VIP are excluded from the Ads and this message only shows up for Non VIP or Paid members

nice tutorial. save first. will be useful someday.
thanks for share

To exclude specific usergroups from using it, you can use this plugin: 
Extend MyBB - My Advertisements