话不多说先看效果：

优点：无需写其他代码，就只需要引用js和调用即可；

缺点：代码优化不够精简，配置项不够强大；

使用如下：

MpName: ""//公众号名称
QrCodeUrl: ""//二维码地址
Type: 0//按钮显示内容 1 文字类型  2 二维码类型 0两种都显示（默认）

完整js代码

var IsSubscribe = {
    Par: {
        "MpName": "",//公众号名称
        "QrCodeUrl": "",//二维码地址
        "Type": 0,//按钮显示内容 1 文字类型  2 二维码类型 0两种都显示（默认）
    },
    Init: function (par) {
        if (par.MpName != null && par.MpName != undefined) {
            this.Par.MpName = par.MpName;
        }
        if (par.QrCodeUrl != null && par.QrCodeUrl != undefined) {
            this.Par.QrCodeUrl = par.QrCodeUrl;
        }
        if (par.IsShowBtn != null && par.IsShowBtn != undefined) {
            this.Par.IsShowBtn = par.IsShowBtn;
        }
        if (par.Type != null && par.Type != undefined && par.Type >= 0 && par.Type <= 2) {
            this.Par.Type = par.Type;
        }
        IsSubscribe.SubscribeTool();
    },
    SubscribeTool: function () {
        var html = '<div class="issubscribe">';
        if (this.Par.MpName == "") {
            html += '<span>关注我们公众号</span>';
        } else {
            html += '<span>关注 “ ';
            html += '<b onclick="IsSubscribe.ClearStorage()">' + this.Par.MpName + '</b>';
            html += ' ” 公众号</span>';
        }
        html += '<a href="javascript:IsSubscribe.layerShow()">关注</a>';
        html += '</div>';
        html += '<div class="subscribe_placeholder"></div>';
        $("body").prepend(html);
        IsSubscribe.ToolStyle();
    },
    ToolStyle: function () {
        $(".issubscribe ").css({
            "height": " 45px",
        });

        $(".subscribe_placeholder ").css({
            "height": " 46px",
        });

        $(".issubscribe ").css({
            "background-color": " #fff",
            "display": " flex",
            "justify-content": " space-between",
            "align-items": " center",
            "padding": " 0px 10px",
            "text-align": " center",
            "font-size": " 15px",
            "width": " 100vw",
            "position": " fixed",
            "top": " 0",
            "left": " 0",
            "right": " 0",
            "z-index": " 19940913",
            "border-bottom": " 1px solid #f1f1f1",
            "line-height": " 50px",
            "color": " #666",
        });
        $(".issubscribe a ").css({
            "color": " #fff",
            "background": " #00D00B",
            "border-radius": " 50px",
            "height": " 30px",
            "line-height": " 30px",
            "text-align": " center",
            "padding": " 0px 25px",
        });

        $(".issubscribe span ").css({
            "overflow": " hidden",
            "white-space": " nowrap",
            "text-overflow": "ellipsis",
            "max-width": "60vw",
        });

        $(".issubscribe b ").css({
            "color": " #F37B1D",
        });
    },
    layerShow: function () {
        var html = '';
        html += '<div class="subscribelayer">';
        if (this.Par.Type == 1 || this.Par.Type == 0) {
            html += '<div class="subscribe_oth">';
            html += '<b>长按识别二维码！也可以这样关注：</b><br>';
            html += '<span>1.打开微信，点击“添加朋友”</span><br>';
            html += '<span>2.点击搜索“公众号”</span><br>';
            html += '<span>3.输入“' + this.Par.MpName + '”，点击搜索</span><br>';
            html += '<span>4.点击"关注"按钮</span>';
            html += '</div>';
        }
        if (this.Par.QrCodeUrl != "" && (this.Par.Type == 2 || this.Par.Type == 0)) {
            if (this.Par.Type == 0) {
                html += '<hr>';
            }
            html += '<div class="subscribe_qrcode">';
            html += '<b>长按识别二维码</b>';
            html += '<img src="' + this.Par.QrCodeUrl + '">';
            html += '</div>';
        }
        html += '<p class="subscribe_close"><span onclick="IsSubscribe.layerClose()">关闭</span></p>';
        html += '</div>';
        $(".issubscribe").after(html);
        IsSubscribe.layerStyle();
    },
    layerStyle: function () {
        $(".subscribelayer ").css({
            "position": " fixed",
            "top": " 0px",
            "left": " 0px",
            "right": " 0px",
            "width": " 100vw",
            "height": " 100vh",
            "background": " rgba(0,0,0,0.9)",
            "color": " #fff",
            "padding": " 10px",
            "z-index": " 19940913",
            "display": " flex",
            "align-items": " center",
            "justify-content": " center",
            "flex-direction": " column",
        });
        $(".subscribelayer .subscribe_oth").css({
            "line-height": " 30px",
        });
        $(".subscribelayer hr").css({
            "width": " 95%",
        });
        $(".subscribelayer .subscribe_qrcode ").css({
            "text-align": " center",
        });
        $(".subscribelayer .subscribe_qrcode img ").css({
            "margin-top": " 15px",
            "width": " 60vw",
            "height": " 60vw",
            "display": " block",
            "text-align": " center",
        });
        $(".subscribelayer .subscribe_close ").css({
            "width": " 100%",
            "text-align": " center",
            "margin-top": " 20px",
        });
        $(".subscribelayer .subscribe_close span ").css({
            "display": " block",
            "width": " 50%",
            "margin-top": " 0",
            "margin-bottom": " 0",
            "margin-left": " auto",
            "margin-right": " auto",
            "background": " #fff",
            "color": " #666",
            "border-radius": " 50px",
            "padding-top": " 7px",
            "padding-bottom": " 7px",
            "padding-left": " 30px",
            "padding-right": " 30px",
            "font-size": " 14px",
        });
    },
    layerClose: function () {
        localStorage.setItem("IsSubscribe", "yangshaofeng");
        $(".subscribelayer").remove();
    },
    ClearStorage: function () {
        localStorage.setItem("IsSubscribe", "");
    },
    GetQueryString: function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
}