代码部署:
好了,接下来就是正文了。将以下代码放置于你想弹窗的位置,即可。如果你想全站弹窗,请添加到 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
2021年4月2日 21:33 沙发
撒暗示暗示
2022年1月6日 15:49 板凳
ssddffzgdff暗无天日
2022年8月28日 14:30 地板
谢谢分享