Copyright notice: This article is an original article and follows
CC 4.0 BY-NC-ND
Copyright agreement. If you want to reprint this article, please attach the original source link and this statement.
Source link:
https://www.v2know.com/MainPage/PreView/351
HTML:
<link rel="stylesheet" href="~/css/style_donate.css" type="text/css" />
<script>
$(function () {
$(".pay_item").click(function () {
$(this).addClass('checked').siblings('.pay_item').removeClass('checked');
var dataid = $(this).attr('data-id');
$(".shang_payimg img").attr("src", "/images/" + dataid + "img.png");
$("#shang_pay_txt").text(dataid == "alipay" ? "Alipay" : "WeChat");
});
});
function dashangToggle() {
$(".hide_box").fadeToggle();
$(".shang_box").fadeToggle();
}
</script>
<div class="content" id="Donate">
<p><a href="javascript:void(0)" onclick="dashangToggle()" class="dashang" title="Support me">Donate</a></p>
<div class="hide_box"></div>
<div class="shang_box">
<a class="shang_close" href="javascript:void(0)" onclick="dashangToggle()" title="close"><img src="~/images/close.jpg" alt="Cancel" /></a>
<div class="shang_tit">
<p>Thanks for your support</p>
</div>
<div class="shang_payimg">
<img src="~/images/alipayimg.png" alt="Scan to support" title="Scan" />
</div>
<div class="pay_explain">Donate to me via Alipay or WeChat.</div>
<div class="shang_payselect">
<div class="pay_item checked" data-id="alipay">
<span class="radiobox"></span>
<span class="pay_logo"><img src="~/images/alipay.jpg" alt="Alipay" /></span>
</div>
<div class="pay_item" data-id="wechat">
<span class="radiobox"></span>
<span class="pay_logo"><img src="~/images/wechat.jpg" alt="WeChat" /></span>
</div>
</div>
<div class="shang_info">
<p>Open <span id="shang_pay_txt">Alipay</span> and scan, you can donate by scanning code</p>
<p>Powered by <a href="https://www.v2know.com" target="_blank" title="EKsumic">v2know.com</a></p>
</div>
</div>
</div>
CSS:
.content {
width: 80%;
margin:45px auto 10px auto;
}
.hide_box {
z-index: 999;
filter: alpha(opacity=50);
background: #666;
opacity: 0.5;
-moz-opacity: 0.5;
left: 0;
top: 0;
height: 99%;
width: 100%;
position: fixed;
display: none;
}
.shang_box {
width: 540px;
height: 540px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin-left: -280px;
margin-top: -280px;
border: 1px dotted #dedede;
display: none;
}
.shang_box img {
border: none;
border-width: 0;
}
.dashang {
display: block;
width: 80px;
margin: 5px auto;
height: 25px;
line-height: 25px;
padding: 10px;
background-color: #E74851;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 10px;
font-weight: bold;
font-size: 16px;
transition: all 0.3s;
}
.dashang:hover {
opacity: 0.8;
padding:12px 16px;
font-size: 18px;
}
.shang_close {
float: right;
display: inline-block;
}
.shang_logo {
display: block;
text-align: center;
margin: 20px auto;
}
.shang_tit {
width: 100%;
height: 75px;
text-align: center;
line-height: 66px;
color: #a3a3a3;
font-size: 16px;
background: url('/images/cy-reward-title-bg.jpg');
font-family: 'Microsoft YaHei';
margin-top: 7px;
margin-right: 2px;
}
.shang_tit p {
color: #a3a3a3;
text-align: center;
font-size: 16px;
}
.shang_payimg {
width: 140px;
padding: 10px;
border: 6px solid #EA5F00;
margin: 0 auto;
border-radius: 3px;
height: 140px;
}
.shang_payimg img {
display: block;
text-align: center;
width: 140px;
height: 140px;
}
.pay_explain {
text-align: center;
margin: 10px auto;
font-size: 12px;
color: #545454;
}
.radiobox {
width: 16px;
height: 16px;
background: url('/images/radio2.jpg');
display: block;
float: left;
margin-top: 5px;
margin-right: 14px;
}
.checked .radiobox {
background: url('/images/radio1.jpg');
}
.shang_payselect {
text-align: center;
margin: 0 auto;
margin-top: 40px;
cursor: pointer;
height: 60px;
width: 280px;
}
.shang_payselect .pay_item {
display: inline-block;
margin-right: 10px;
float: left;
}
.shang_info {
clear: both;
}
.shang_info p, .shang_info a {
color: #C3C3C3;
text-align: center;
font-size: 12px;
text-decoration: none;
line-height: 2em;
}
About CSS:
The total number of images replaced is 3, which are quotation marks, radio1 and radio2 images
The. Content class may conflict with your CSS. It is necessary to modify your style
About JavaScript:
No change required
About HTML:
alipay.jpg " wechat.jpg " alipayimg.png " wechatimg.png " close.jpg Be prepared
Pay attention to cut the QR code, the size is 140 * 140px
Reference sources：
https://www.runoob.com/w3cnote/website-reward-button.html