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

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

需要弹出的div层代码

	

		
码字不易,给 [ Mr.Wu ] 加个 🍗 哒~
			

			
支付宝扫一扫打赏
			
			
			

			
微信扫一扫打赏
			
		
		
	

打赏按钮代码

打赏

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

最终效果