给WordPress添加打赏功能-jQuery实现弹出div层

本来吧，小小博客一枚，流量也不咋地，而且追求简洁，也就没弄打赏分享那些杂七杂八的功能， 不过最近有朋友说想打赏的，我也顺便抽时间给弄出来了。

需要弹出的div层代码

<div class="rewards-popover" style="display: none;">
	<div class="rewards-popovers">
		<h3>码字不易,给 [ Mr.Wu ] 加个 🍗 哒~</h3>
			<div class="rewards-popover-item">
			<h4>支付宝扫一扫打赏</h4>
			<img src="https://www.mrwu.red/wp-content/themes/iDevise/images/zfb.jpg">
			</div>
			<div class="rewards-popover-item">
			<h4>微信扫一扫打赏</h4>
			<img src="https://www.mrwu.red/wp-content/themes/iDevise/images/wx.jpg">
		</div>
		<span class="rewards-popover-close" etap="rewards-close"></span>
	</div>
</div>

打赏按钮代码

<a href="javascript:;" class="action-rewards">打赏</a>

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();
});
});

最终效果