检测用户是否开启了广告屏蔽插件并弹窗提醒

从旧站数据库找到这么一篇文章，可以提醒用户关闭adblock等广告屏蔽插件，美观而又大方，也不太让用户反感，当然还是使用的上一篇弹窗文章中的js，有稍作修改。

今天，有人在网站评论区问我如何做到提醒用户关闭Adblock等广告屏蔽的插件。今天，就把这种方法发出来。当然，本来是打算从知乎扒的，发现只能扒个css，扒不到js。所以，就从其他地方搞了一个发出来了。

添加伪广告元素

这一步是为了，让广告屏蔽插件，屏蔽掉我们自己创建的元素，好后期判断是否存在这个var变量。在网站根目录新建一个js文件，重命名为adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js，里面的内容如下

var adskilltest=true;

footer.php

原版文件

在你的底部文件footer.php中</body>前，插入如下代码。

<script src="/adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js" type="text/javascript"></script>
<style type="text/css">
.addkillcont{position: fixed;width: 100%;height: 2000px;z-index: 999999;top: 0px;background: #CCC;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#00000000);background-color: rgba(103, 99, 99, 0.59);}
.addesc{position: relative;width: 360px;height: 200px;margin-left: auto;margin-right: auto;background: #FFF;border: 1px solid #CCC;webkit-box-shadow: 0 0 20px rgba(27,22,22,0.3);-moz-box-shadow: 0 0 20px rgba(27,22,22,0.3);-o-box-shadow: 0 0 20px rgba(27,22,22,0.3);box-shadow: 0 0 20px rgba(27,22,22,0.3);padding: 10px;margin-top: 10px;font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;}
</style>
<script type='text/javascript'>
    $(document).ready(function(){
        setTimeout(function(){new QXAdTest().init();},1);
    });
function QXAdTest(){
    var thisObj = this;
    //初始化，判断变量是否存在
    this.init = function(){
        try{
            if(typeof(adskilltest)=='undefined' ){
                this.DoShow();
                $('.idcloseadtips').on("click",function(){
                    $("#idadkillsho").remove();
                });
            }
        }catch(e){
            $("#idadkillsho").remove();
        }
    };
    this.DoShow =function(){
        try{
            var TPL='<div id="idadkillsho" class="addkillcont">' +
                    '<div class="addesc" id="addesc" style="display:none;">' +
                    '<div style="color:red;font-weight:bold; text-align:center;">屏蔽广告虽易,做网站不易,且屏蔽且珍惜...</div>'+
                    '<div style="padding-top:10px;color:#000;">       网站运营需要成本,收看、点击赞助商广告，我们将做的更好!</div>'+
                    '<div style="text-align:center;color:gray;">8秒后自动关闭...</div>'+
                    '<span class="idcloseadtips" style="position:absolute;right:10px;bottom:10px;font-weight:bold;color:gray;cursor:pointer">点此关闭</span>'+
                    '</div>' +
                  '</div>';
            var TPLObj = $(TPL);
            TPLObj.appendTo($('BODY')).hide().fadeIn(500,function(){
                    $("#addesc").animate({"margin-top":"150px"},600);
                    $("#addesc").slideDown(500,function(){
                        $("#addesc").animate({"height":"120px"},600);
                    }
                );
                //3秒移除
                thisObj.DelayRemove();
            });
        }catch(e){
            $("#idadkillsho").remove();//一定移除
        }
    }
    this.DelayRemove = function(){
        setTimeout(function(){
            $("#addesc").fadeOut(600,function(){
                $("#idadkillsho").remove();
            });
        },10000);
    }
}
</script>

当然，本站不会添加这种东西的，只是为了测试。参考链接：http://www.youranshare.com/push/code/phpcode/237.html

魔改css及js

下面，魔改了代码，不再让用户反感，取消弹窗模式。只有底部一个文字提示，而且不会自动关闭了。

<script src="/adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js" type="text/javascript"></script>
<style type="text/css">
.addkillcont{position: fixed;z-index: 999999;bottom: 0px;background: #CCC;width:100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#00000000);}
.addesc{position: relative;margin-left: auto;margin-right: auto;background: #FFF;border: 1px solid #CCC;webkit-box-shadow: 0 0 20px rgba(27,22,22,0.3);-moz-box-shadow: 0 0 20px rgba(27,22,22,0.3);-o-box-shadow: 0 0 20px rgba(27,22,22,0.3);box-shadow: 0 0 20px rgba(27,22,22,0.3);padding: 10px;margin-top: 10px;font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;}
</style>
<script type='text/javascript'>
    $(document).ready(function(){
        setTimeout(function(){new QXAdTest().init();},1);
    });
function QXAdTest(){
    var thisObj = this;
    //初始化，判断变量是否存在
    this.init = function(){
        try{
            if(typeof(adskilltest)=='undefined' ){
                this.DoShow();
                $('.idcloseadtips').on("click",function(){
                    $("#idadkillsho").remove();
                });
            }
        }catch(e){
            $("#idadkillsho").remove();
        }
    };
    this.DoShow =function(){
        try{
            var TPL='<div id="idadkillsho" class="addkillcont">' +
                    '<div class="addesc" id="addesc" style="display:none;">' +
                    '<div style="color:red;font-weight:bold; text-align:center;">屏蔽广告虽易,做网站不易,且屏蔽且珍惜...</div>'+
                    '<span class="idcloseadtips" style="position:absolute;right:10px;bottom:10px;font-weight:bold;color:gray;cursor:pointer"><i class="fa fa-times-circle"></i></span>'+
                    '</div>' +
                  '</div>';
            var TPLObj = $(TPL);
            TPLObj.appendTo($('header')).hide().fadeIn(500,function(){
                    $("#addesc").animate({"margin-top":"0"},600);
                    $("#addesc").slideDown(500,function(){
                        $("#addesc").animate({"height":"40px"},600);
                    }
                );
            });
        }catch(e){
            $("#idadkillsho").remove();//一定移除
        }
    }
}
</script>

下面是修改后的样式！