EMLOG基于HTML+JS实现二维码打赏弹窗

摘要

打赏功能在博客网站上非常的常见，而在EMLOG上除了通过插件实现以外，动手能力强的人也可以自己操作实现，现在就来为大家分享一个EMLOG基于HTML+JS实现二维码打赏弹窗的方法。

一、操作步骤

1、打开模板文件header.php，在合适的位置引入jquery代码

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

2、打开模板文件echo_log.php，在文章底部添加如下代码

<a href="javascript:void(0)"  onclick="weixin('图片地址')">输出位置</a>
<div class="wxbox" style="display: none;"><ul><p class="wxclose"><span class="wxtitle"></span><a href="javascript:;" title="关闭"><i class="fa fa-times"></i></a></p><span class="wxpic"></span></ul></div>

3、继续添加如下JS代码

<script>
function weixin(a) {
    $(".blackground").fadeIn(100);
    $(".wxtitle").html('<i class="fa fa-qrcode"></i> <span style="color:#f00">微信</span> 扫一扫关注')
    $(".wxbox,.wxpic").animate({ opacity: "show", marginTop: "-170px" }, "slow")    
    var wx = new Image(); wx.src =a;
    wx.onload = function() { setTimeout(function() { $(".wxpic").html('<img src="'+wx.src+'" style="width:260px;height:240px;margin-top:-10px">') }, 100) };
};
$(function(){jQuery(function() { var meta = document.getElementsByTagName('meta'); var a = encodeURIComponent(location.href), b = encodeURIComponent(document.title); $(".wxclose a").click(function() { $(".blackground").fadeOut(100); $(".wxbox").animate({ opacity: "hide", marginTop: "-300px" }, "slow") }) })});
</script>

4、继续添加如下CSS代码

<style>
.wxbox{position:fixed;top:50%;left:50%;z-index:9999;display:none;margin:0 0 0 -150px;padding:20px;width:300px;height:300px;border-radius:20px;background-color:#fff;box-shadow:0 0 10px #000}
.wxbox .wxclose{margin-bottom:10px;color:#000;font-weight:700;font-size:18px}
.wxbox .wxclose a{float:right;display:block;width:19px;height:19px;-webkit-transition:all .6s ease-in-out 0s;-moz-transition:all .6s ease-in-out 0s;transition:all .6s ease-in-out 0s}
</style>

二、原理解析

在文章底部添加一个DIV弹窗，通过HTML+JS的来实现点击出现带二维码的弹窗、并且可以关闭的功能

三、注意事项

1、本教程中的JS代码可以放置在footer.php模板中，而CSS代码则可以放置在公共CSS文件中

2、本教程中的二维码不仅可以放置打赏二维码，也可以放置公众号二维码等一些你希望的二维码内容

标签：emlog教程