小功能-打赏美化

梓逸
2021-07-01 / 0 评论 / 4 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年11月18日,已超过13天没有更新,若内容或图片失效,请留言反馈。

打赏插件美化,样式如下,也可在底部查看本站的样式,代码放在里面了哈,自己取, 表情
后台设置还是对应的,微信就是微信,支付宝就是支付宝,QQ去掉了,有需要自己花时间添加。
有不懂的留言,99%都会回复 表情


[tabs]
[item title="支付宝界面"]11[/item]
[item title="微信界面"]12[/item]
[/tabs]



代码自取, 表情 表情
[tabs]
[item title="前端代码"]
[hide]

<?php if ($this->options->打赏) : ?>
<button id="newDaShang" onclick="reward()" class="btn btn-outline-primary rounded-pill align-items-center d-inline-flex"
    type="button">
    <svg class="icon icon-20" aria-hidden="true">
        <use xlink:href="#tsk"></use>
    </svg>
    <span class="ml-1">打赏</span>
</button>
<div class="hidebody" style="display: none;"></div>
<div class="showbody" style="display: none;">
    <a class="showbody_c" href="javascript:void(0)" onclick="reward()" title="关闭">
        <img src="https://img.liurunmin.cn/icon/close.png" alt="取消"></a>
    <div class="reward_img">
        <img class="alipay_qrcode" src="<?php $this->options->alipay() ?>" alt="支付宝二维码">
    </div>
    <div class="reward_bg">
        <div class="pay_box" data-id="<?php $this->options->alipay() ?>">
            <span class="pay_box_span"></span>
            <span class="qr_code"><img src="https://img.liurunmin.cn/icon/alipay.svg" alt="支付宝二维码"></span>
        </div>
        <div class="pay_box choice" data-id="<?php $this->options->wechatpay() ?>">
            <span class="pay_box_span"></span>
            <span class="qr_code"><img src="https://img.liurunmin.cn/icon/wechat.svg" alt="微信二维码"></span>
        </div>
    </div>
</div>
<?php endif; ?>

[/hide]
[/item]
[item title="CSS和JS"]
[hide]

/* 付款 */
.showbody {
    width: 23vw;
    background-color: #fff;
    border-radius: 6px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    margin-left: -11.5vw;
    margin-top: -15%;
    display: none;
}

.showbody a.showbody_c {
    display: inline-block;
    top: 10px;
    position: absolute;
    right: 10px;
}

.showbody img {
    border: none;
    border-width: 0;
    border-radius: 0;
    width: 100%;
    height: auto;
    margin: 0;
    box-shadow: none;
}

.reward_img {
    margin: 0 auto;
    border-radius: .1875rem;
    border-radius: .625rem;
}

.reward_bg {
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.pay_box:first-child {
    margin-left: 10px;
}

.pay_box {
    display: inline-block;
    margin-right: 10px;
    padding: 15px 0;
}

.pay_box img {
    width: auto;
}

.reward_bg img {
    display: inline !important;
}

span.pay_box_span {
    width: 16px;
    height: 16px;
    display: block;
    float: left;
    margin-top: 6px;
    margin-right: 5px;
}

.hidebody {
    z-index: 999;
    background: #000;
    opacity: .5;
    -moz-opacity: .5;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: fixed;
    display: none;
}

@media (max-width: 991px) {
    .showbody {
        width: 320px;
        margin-left: -160px;
        top: 60px;
        margin-top: 20%;
    }
}
<!-- JS -->
<script>
    $(function() {
        $(".pay_box").click(function() {
            $(this).addClass('choice').siblings('.pay_box').removeClass('choice');
            var dataid = $(this).attr('data-id');
            $(".reward_img img").attr("src", dataid);
        });
        $(".hidebody").click(function() {
            reward();
        });
    });

    function reward() {
        $(".hidebody").fadeToggle();
        $(".showbody").fadeToggle();
    }
</script>

[/hide]
[/item]
[/tabs]

0

评论

博主关闭了所有页面的评论