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

热度:200℃ 评论:0 发布时间:2018-10-27 收录:已收录

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

需要弹出的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="/wp-content/themes/iDevise/images/zfb.jpg">
			</div>
			<div class="rewards-popover-item">
			<h4>微信扫一扫打赏</h4>
			<img src="/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();
});
});

最终效果

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

打赏
本文由 Mr.Wu 创作,除注明转载/出处外,均为本站原创,转载前请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

顶部
护眼
搜索
分享