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

Mr.Wu 1,824 4

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

需要弹出的div层代码


打赏按钮代码

打赏

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

最终效果

广告

打赏
发表评论 取消回复
表情 图片 链接 代码

  1. zyx
    zyx Lv 1

    jQuery调用不起来!

    • Mr.Wu
      Mr.Wu 站长

      @zyx应该是你某处没弄对,我是直接复制的我的打赏的代码,你看我的就正常啊

      • zyx
        zyx Lv 1

        @Mr.Wu有没有联系方式,帮下忙谢谢!

  2. 异星软件空间

    效果不错!!

分享
微信
微博
QQ