首页 » 建站手册 » 一段访问网站自动弹窗的js代码

一段访问网站自动弹窗的js代码

谷歌已收录,更新于2019年07月04日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

说明

今天,有个Q群问如何实现用户访问网站,自动弹窗图片广告,然后几秒钟自动消失或者点击关闭,作为一个扒站魔改主题的站长,emmm,小菜一碟。

在进入正文前,说下js的来历。之前,有个访客在我网站留言,问如何实现用户开启广告屏蔽插件,网站顶部自动加个广告被屏蔽的提醒,然后给了我个示例网站,让我扒一下。emmm,知乎,不好扒,然后,我又找了几个站,发现了段代码,挺好的。最后,魔改了下cssjs,实现非弹窗式友好型提醒广告被屏蔽的功能。

自动弹窗

好了,接下来就是正文了。将以下代码放置于你想弹窗的位置,即可。如果你想全站弹窗,请添加到footer.php;首页,请添加到index.php;文章页的话,post.php里即可。不同博客程序,可能稍有区别,emmm,自己体会吧。

JS弹窗效果

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<style type="text/css">
.addesc img{max-width:100%}.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;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;}
img{margin:0 auto;display:block}
</style>
<script type='text/javascript'>
    $(document).ready(function(){
        setTimeout(function(){new QXAdTest().init();},1);
    });
function QXAdTest(){
    var thisObj = this;
    this.init = function(){
        try{
            
                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;width:80%">' +
                    '<div style="color:red;font-weight:bold; text-align:center;margin-bottom:10px">支持下我们哈</div>'+
                    '<img src="图片链接" alt="图片说明">'+
                    '<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":"250px"},600);
                    }
                );
                //自动移除弹窗代码调用
                thisObj.DelayRemove();
            });
        }catch(e){
            $("#idadkillsho").remove();//弹窗关闭按钮的调用
        }
    }
    this.DelayRemove = function(){
        setTimeout(function(){
            $("#addesc").fadeOut(600,function(){
                $("#idadkillsho").remove();
            });
        },10000);//自动移除时间,这里单位是ms
    }
}
</script>

代码解释

代码中的第1行,是jq调用,如果你主题已经调用了jq,请去除第一行代码。判断是否调用jq(右键网页,查看源码,搜索jquery)。

代码中的第30行,width:80%表示弹窗的宽度,占屏幕宽度的80%

代码中第32行,图片链接与图片说明,请更改。

代码中的第38行,150px表示弹窗距离网页顶部的距离。

代码中的第41行,250px表示弹窗的高度。

代码中的第56行,数字表示了自动关闭弹窗的时间,单位是ms

后续说明

我只是实现了功能,js基本没问题,css简直飞起,会改的自行修改吧。不会改的,下方留言即可。

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

已有 8 条评论

  1. 梦魂 梦魂说道:

    挺好的功能

    1. 枂下 枂下说道:

      嗯嗯,可以配合cookie,达到很好的效果,比如全站紧急通告之类。

  2. 森屿博客 森屿博客说道:

    沙发有人了,那我就坐板凳吧

  3. 仙踪小栈 仙踪小栈说道:

    先占个沙发

    1. 枂下 枂下说道:

      emmm,欢迎大佬前来

      1. 仙踪小栈 仙踪小栈说道:

        说话要负责任,不过我肯定是你大哥,O(∩_∩)O

        1. 枂下 枂下说道:

          emmm,大佬常来玩😁

返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫