给自己的博客加了一个简单的赞赏功能,点击赞赏按钮,就会出现一个赞赏弹窗,使用了几张二维码图片替换。

效果预览

目前我只开了微信赞赏,你可以自己设置支付宝和微信同时开

代码

HTML部分

<!-- 赞赏按钮 -->
    <div class="entry-shang text-center">
        <button class="zs show-zs btn btn-bred">赞赏</button>
    </div>
    
    <!-- 全屏遮罩背景 -->
    <div class="zs-modal-bg"></div>
    
    <div class="zs-modal-box">
        <div class="zs-modal-head">
            <!-- 关闭按钮 -->
            <button type="button" class="close">×</button>

            <!-- 左上角logo和文字 -->
            <span class="author">
                <a href="https://www.artjay.me" target="_blank">
                    <img src="./images/logo.ico"/>ArtJay
                </a>
            </span>
            <p class="tip"><i></i><span>谢谢老板~</span></p>
        </div>
              
        <div class="zs-modal-body">
            <div class="zs-modal-btns">
                <button class="btn btn-blink" data-num="2">2元</button>
                <button class="btn btn-blink" data-num="5">5元</button>
                <button class="btn btn-blink" data-num="10">10元</button>
                <button class="btn btn-blink" data-num="50">50元</button>
                <button class="btn btn-blink" data-num="100">100元</button>
                <button class="btn btn-blink" data-num="1">任意金额</button>
            </div>             
            <div class="zs-modal-pay">
                <button class="btn btn-bred" id="pay-text">2元</button>
                <p>使用<span id="pay-type">微信</span>扫描二维码完成支付</p>
                <img src="./images/wechat-btn.png" id="pay-image"/>
            </div>
        </div>
              
        <div class="zs-modal-footer">
            <!-- 赞赏模式,你可以全部打开,也可以选择留一个你喜欢的
                 只需注释掉你想关闭的赞赏模式对应的代码就行,然后再相应的微调一下样式 
            -->

            <!-- 支付宝控件 -->
            <label>
                <input type="radio" name="zs-type" value="alipay" class="zs-type" checked="checked">
                <span class="zs-alipay"><img src="./images/alipay-btn.png"/></span>
            </label>

            <!-- 微信控件 -->
            <label>
                <input type="radio" name="zs-type" value="wechat" class="zs-type" >
                <span class="zs-wechat"><img src="./images/wechat-btn.png"/></span>
            </label>

            <!-- 清除浮动 -->
            <div class="clear"></div>
        </div>
    </div>

JS和CSS部分

下载完整文件

直接clone这个项目,按照index.html中的代码,把css、js代码分别引入就可以了

使用须知

二维码图片是放在当前目录中的images文件中,支付宝和微信的命名规则为:type+'-'+data-num

  • 如果选择2元,同时选择支付宝付款方式时,则对应的图片就是alipay-2.png

    <button class="btn btn-blink" data-num="2">2元</button>
    
  • 如果选择10元,同时选择微信付款方式时,则对应的图片就是wechat-10.png

    <button class="btn btn-blink" data-num="10">10元</button>
    

记得替换images路径下的二维码为你自己的,不然别人打款就会打给我的啦~

注意

  • 如果图片出了bug,检查下是不是路径的问题
  • 如果js出了问题,弹窗出不来,同理F12检查路径是否出错
  • 如果css出了问题,F12针对自己使用的主题改一下
Jay

谢谢老板~

使用微信扫描二维码完成支付