jquery打赏功能

最新推荐文章于 2021-06-08 11:07:22 发布

原创最新推荐文章于 2021-06-08 11:07:22 发布 · 732 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用HTML、CSS及jQuery实现的简单网页弹窗效果案例，并演示了如何通过弹窗收集用户输入的积分数据，进行积分的提交与计算。

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>无标题文档</title>
	<style>
	.pop-body {
	display: none;
	background: #000;
	position: absolute;
	z-index: 1000;
	top: 0;
	left: 0;
	opacity: 0.5;
	}
	.pop-home {
	background: #FFF;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -150px;
	width: 300px;
	height: 300px;
	display: none;
	z-index: 1100;
	}
	.pop-home span {
	font-size: 30px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	}
	</style>
	</head>

	<body>
	<div class="dianji">点击</div>
	<div class="pop-body"></div>
	<div class="pop-home">
	<span>×</span>
	<div class="form"><label>奖励积分为：</label><input type="text" /><button class="tijiao">提交</button></div>
	<div class="zongfen">5000</div>
	</div>
	<script src="jq源代码/jquery-3.1.0.js" type="text/javascript"></script>
	<script src="jq源代码/jquery-3.1.0.min.js" type="text/javascript"></script>
	<script>
	$('.dianji').click(function(){
	var w=$(window).width()
	var h=$(window).height()
	$('.pop-body').show().css({width:w,height:h})
	$('.pop-home').show()
	$('body').css('overflow','hidden')

	});
	//点击关闭
	$('.pop-home span,.pop-body').click(function(){
	$('.pop-body,.pop-home').hide()
	$('body').css('overflow','auto')
	});
	$('.tijiao').click(function(){
	var a=$('.form input').val()
	var b=$('.zongfen').text()
	var c=parseInt(a)
	var d=parseInt(b)
	if(a==""){
	alert("请输入积分");
	return false;
	}
	z=d-c
	$('.zongfen').text(z)
	});

	</script>
	</body>
	</html>