访问网站自动图片带链接弹窗提示——WordPress美化

2019年7月4日22:23:22 3 0
摘要

之前仙踪小栈曾发过《代码实现重要公告首页弹窗提示——WrodPress美化》,不过这个弹框提示是文字提示,而且不带链接。近日有朋友想弄一个:用户访问网站,自动弹窗图片广告,然后几秒钟自动消失或者可以手动点击关闭,零技术黑冰站长(原云端框架博客站长)再次出手,特分享给大家

 

访问网站自动图片带链接弹窗提示——WordPress美化

 

代码部署:

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

 

[erphpdown]

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<style type="text/css">
.addesc ing{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:60%">' +
                    '<div style="color:red;font-weight:bold;font-size:20px; text-align:center;margin-bottom:20px">欢迎光临仙踪小栈,希望多多支持我们!</div>'+
                    '<a href="链接网址"><img src="图片地址" alt="图片说明"></a>'+
                    '<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":"480px"},600);
                    }
                );
                //自动移除弹窗代码调用
                thisObj.DelayRemove();
            });
        }catch(e){
            $("#idadkillsho").remove();//弹窗关闭按钮的调用
        }
    }
    this.DelayRemove = function(){
        setTimeout(function(){
            $("#addesc").fadeOut(600,function(){
                $("#idadkillsho").remove();
            });
        },10000);//自动移除时间,这里单位是ms
    }
}
</script>

[/erphpdown]

 

代码说明:

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

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

代码中第 30 行,链接网址、图片链接与图片说明,请更改成你自己的。

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

代码中的第 38 行,480px 表示弹窗的高度。

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

 

后续说明:

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

 

效果图:

 

 

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!

Warning: mysqli_query(): (HY000/1194): Table 'wp_posts' is marked as crashed and should be repaired in /home/www/ixianzong.com/wp-includes/class-wpdb.php on line 2431

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  0   博主  0

    • yxmzzyylyk yxmzzyylyk 0 来自天朝的朋友 谷歌浏览器 Windows 10 四川省宜宾市 电信

      撒暗示暗示

      • 1000 1000 2 来自天朝的朋友 谷歌浏览器 Windows 7 中国 移动

        ssddffzgdff暗无天日

        • 35536 35536 0 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

          谢谢分享