51工具盒子本来吧，小小博客一枚，流量也不咋地，而且追求简洁，也就没弄打赏分享那些杂七杂八的功能，
不过最近有朋友说想打赏的，我也顺便抽时间给弄出来了。
需要弹出的div层代码
<h3>码字不易,给 [ Mr.Wu ] 加个 ? 哒~</h3>
<div class="rewards-popover-item">
<h4>支付宝扫一扫打赏</h4>
<a data-fancybox="images" data-no-instant="true" href="https://www.mrwu.red/wp-content/themes/iDevise/images/zfb.jpg"><img decoding="async" data-original="https://www.mrwu.red/wp-content/themes/iDevise/images/zfb.jpg" src="http://static.51tbox.com/static/2024-12-20/col/a031a835595ce95c7b8c3d96641775ed/4205efc1e1744af7a246fd32ad635c1c.gif.jpg" alt="给WordPress添加打赏功能-jQuery实现弹出div层"></a>
</div>
<div class="rewards-popover-item">
<h4>微信扫一扫打赏</h4>
<a data-fancybox="images" data-no-instant="true" href="https://www.mrwu.red/wp-content/themes/iDevise/images/wx.jpg"><img decoding="async" data-original="https://www.mrwu.red/wp-content/themes/iDevise/images/wx.jpg" src="http://static.51tbox.com/static/2024-12-20/col/a031a835595ce95c7b8c3d96641775ed/4205efc1e1744af7a246fd32ad635c1c.gif.jpg" alt="给WordPress添加打赏功能-jQuery实现弹出div层"></a>
</div>
<span class="rewards-popover-close" etap="rewards-close"></span>
打赏按钮代码
打赏
css代码
/*打赏*/
.action-rewards {
float: right;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
min-width: 50px;
color: #fff;
background-color: #F7B10D;
margin-top: 20px;
opacity: 0.8;
display: inline-block;
}
.rewards-popover {
position: fixed;
top: 50%;
left: 50%;
margin: -200px 0 0 -275px;
width: 550px;
background-color: #FFF;
padding: 40px 20px 50px;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
z-index: 9999;
display: none;
text-align: center
}
.rewards-popover h3 {
font-size: 18px;
font-weight: bold;
text-align: center;
margin: 0 15px 30px
}
.rewards-popover-item {
display: inline-block;
width: 200px;
margin: 0 20px
}
.rewards-popover-item h4 {
margin: 0 20px 10px;
font-size: 15px
}
.rewards-popover-item img {
width: 200px;
height: 245px;
background-color: #eee;
border-radius: 2px;
padding: 5px
}
.rewards-popover-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
width: 20px;
height: 20px;
background: url(/wp-content/themes/iDevise/images/tubiao.png) no-repeat scroll -340px 0px;
}
.rewards-popover-close:hover {
color: #666
}
jQuery弹窗代码
//打赏弹框
$(function(){
$(".action-rewards").click(function(){ /* .action-rewards 弹出div层按钮 */
$(".rewards-popover").fadeIn(); /* .rewards-popover 第一个div层 */
$(".rewards-popovers").delay(500).slideDown(); /* .rewards-popovers 第二个div层 */
});
$(".rewards-popover-close").click(function(){ /* .rewards-popover-close 关闭div层按钮 */
$(".rewards-popover").fadeOut();
});
});
最终效果
