免插件实现Adblock检测,全网通用

首先,写这段教程并不是说此功能有多适用,但是总比使用插件的强,技术宅的理念就是能自己动手就自己动手,免去插件,节省服务器资源!
此教程可以说是全网首创了,转载请记得保留版权谢谢
网站广告被Adblock拦截?没收入?别急,下面这款插件也许可以帮助你,只是也许,不是一定,毕竟不是谁都喜欢广告!
免插件实现Adblock检测,全网通用,其实就是使用了一款js插件-adi.js。我也是无意在浏览国外某网站发现的,发现适用性很大,就自己琢磨了下。效果还别说,真的很强!以下是效果图:
142341_36cL_2306979技术宅也实验了关闭后与开启此弹窗的准确性,准确性达到百分之百!所以,删了插件,用用这个呗!

使用教程

复制代码保存为js文件

/**
 * ==============
 *	 Adi.js 
 * ==============
 * 
 * @author: Marius Balaj
 * @website: http://mariusbalaj.com
 * @contact: [email protected]
 *
 * 
 */


/**
 * Check for jQuery
 */

if (typeof jQuery === 'undefined') {
    throw new Error('Make sure jQuery is included before the jquery.adi.js');
}

;(function($) {

    'use strict';


    var Adi;

    $.adi = function(args) {

        /**
         * Merge defaults with user options
         */

        var options = $.extend({}, Adi.defaults, args);
        return new Adi(options);
    };


    /**
     * Constructor
     */

    Adi = function(args) {

        /**
         * Merge this with user options
         */

        $.extend(this, args);

        if (this._check()) {
            this._init();
            this.active();
        }

        if(!this._check()) {
            this.inactive();
        }
    };

    /**
     * Check for $.adblock
     */

    Adi.prototype._check = function() {
        return $.adblock === undefined
    };

    /**
     * Start plugin	 
     */

    Adi.prototype._init = function() {
        this._append();
    };

    /**
     * Set template
     */

    Adi.prototype._setTemplate = function(title, content) {

        return '<div class="jquery-adi">' +
            '<div class="jquery-adi_content">' +
            '<button class="jquery-adi_close"></button>' +
            '<h2>' + title + '</h2>' +
            '<p>' + content + '</p>' +
            '</div>' +
            '</div>';
    };

    /**
     * Append html
     */

    Adi.prototype._append = function(callback) {

        this.$el = $(this._setTemplate(this.title, this.content)).appendTo($(document.body)).addClass(this.theme);
        this._show();
    };

    /**
     * Show modal
     */

    Adi.prototype._show = function() {

        var that = this;

        this.$el.show();
        this._center();
        this._controls();

        this.onOpen(this.$el);
    };


    /**
     * Modal controls
     */

    Adi.prototype._controls = function() {

        var that = this;

        function close() {            
            that.$el.hide();
            that.onClose(that.$el);
        }

        this.$el.on('click', '.jquery-adi_close', close);
        $(document).on('keyup', function(e) {
            if (e.keyCode == 27)
                close();
        });
    };


    /**
     * Center modal
     */

    Adi.prototype._center = function() {
        var $modal = this.$el.find('.jquery-adi_content');
        $modal.css('margin-top', -Math.abs($modal.outerHeight() / 2));
    };

    /**
     * Defaults
     */

    Adi.defaults = {
        title: 'Adblock detected!',
        content: 'We noticed that you may have an Ad Blocker turned on. Please be aware that our site is best experienced with Ad Blockers turned off.',
        theme: 'light',
        onOpen: function() {},
        onClose: function() {},
        active: function() {},
        inactive: function() {}
    };

})(jQuery);

以下代码也保存为js,js名称区别于以上

/**
 * if adblock is active, this file will be blocked
 * so $.adblock is not defined
 */

jQuery.adblock = false;

复制以下代码保存为css

/* Adi.js CSS ====== */

.jquery-adi {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    background: rgba(0, 0, 0, .7);
    z-index: 999999;
}

.jquery-adi_content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    padding: 30px 40px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    margin-left: -160px;
    box-sizing: border-box;
}

.jquery-adi_content h2,
.jquery-adi_content p,
.jquery-adi_content button {
    padding: 0;
    margin: 0;
}

.jquery-adi_content button {
    position: absolute;
    right: -15px;
    top: -15px;
    border: 0;
    outline: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #d5d5d5;
    background-image: url('../images/icn_close.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    box-shadow: -2px 2px 8px rgba(148, 146, 145, 0.3);
}

.jquery-adi_content h2 {
    color: #e76e65;
    font-size: 22px;
    font-weight: bold;
}

.jquery-adi_content h2:before {
    content: "";
    width: 80px;
    height: 80px;
    background-color: #e76e65;
    background-image: url('../images/icn_danger.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    margin: 0 auto 30px;
    border-radius: 50%;
}

.jquery-adi_content p {
    font-size: 14px;
    color: #989898;
    line-height: 1.4;
    margin: 10px 0;
}


/* Dark Theme ====== */

.jquery-adi.dark .jquery-adi_content {
    background: #1F1F1F;
}

.jquery-adi.dark .jquery-adi_content h2 {
    color: #FF4335;
}

.jquery-adi.dark .jquery-adi_content h2:before {
	background-color: #FF4335;
	background-position: bottom center;
}

.jquery-adi.dark .jquery-adi_content p {
    color: #ffffff;
}

.jquery-adi.dark .jquery-adi_content button {
	background-color: #ffffff;
	background-position: bottom left;
}

然后将保存下来的css和js在您的cms之中引用!

在引用的js下方添加如下代码

<script>
	$.adi
	({ 
		content: "We try for you and asking nothing in return. Support our project - disable ad blocking for our site.",
		theme: "dark"
	});
	</script>

如果需要弹窗显示中文,请记得自己修改对应英文为中文,这里就不阐述了!

如果部署代码不会,下面的懒人包也许可以帮助你。自行下载吧!技术宅已经引用了此功能,大家自行测试!
两张图片,自己下载!
icn_close

icn_danger

技术分享

Auto Unlock功能,如何使用Auto Unlock功能

2016-7-8 22:15:58

技术分享

简单的PHP域名授权函数

2016-7-22 11:25:04

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索

关于我们

技术宅,专注分享,专注技术!分享互联网科技新闻轶事,分享生活小常识,各种数码使用小技巧!互联网的精神本就是分享,我们坚信分享会带来更多的进步!

Copyright © 2020 技术宅 苏ICP备17056378号 苏公网安备32010202010371号 - 查询 31 次,耗时 0.1655 秒 南京市玄武区酷芯壳网络科技中心 提供技术支持 安全联盟认证