马富天PHP博客

jQuery实现页面弹窗【实现打赏功能】

学习笔记 马富天 2016-08-17 14:37:44 68 2

【摘要】前段时间一个朋友做了一个文章页面的打赏功能,让我去给他测试测试,然后我给他转了1分钱,后来感觉这个功能还是蛮有意思的,于是乎我准备在自己的博客文章页面中也做一个这样的打赏功能,本文给出具体实现代码。

本文是基于jQuery实现的弹出对话框实现打赏功能,直接看代码即可:

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>jQuery实现页面弹窗弹出选项卡</title>
  6. 		<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
  7. 		<style type="text/css">
  8. 			*{margin:0;padding:0;font-size:12px;}
  9. 			button{padding:10px 20px;}
  10. 			.donate
  11. 			{
  12. 				position:absolute;top:20%;border:1px solid #ACACAC;
  13. 				z-index:999;min-height:300px;border-radius:4px;background:#F2F2F2;
  14. 				width:80%;left:10%;display:none;			
  15. 			}
  16. 			.donate h3
  17. 			{
  18. 				line-height:30px;text-indent:2em;font-size:16px;font-family:"Microsoft YaHei";
  19. 				color:#D8450B;margin-top:10px;border-bottom:1px dotted #BBB;
  20. 				background:#F5F5F5;padding-bottom:5px;
  21. 			}
  22. 			.donate h3 span
  23. 			{
  24. 				float:right;margin-right:30px;font-size:16px;cursor:default;color:#CCC;
  25. 				border:1px solid #ACACAC;padding:0;text-indent:0;height:20px;width:20px;
  26. 				text-align:center;margin-top:5px;line-height:20px;border-radius:4px;background:#EEE;
  27. 			}
  28. 			.donate h3 span:hover{color:#999;border-color:#CCC;}
  29. 			.donate p
  30. 			{
  31. 				color:#666;line-height:30px;text-indent:2em;
  32. 				font-family:"Microsoft YaHei";padding:0 5px;
  33. 			}
  34. 			.donate table{color:#666;font-family:"Microsoft YaHei";margin-left:2em;}
  35. 			.donate table tr{}
  36. 			.donate table td{}
  37. 			.donate table .input{padding-top:4px;}
  38. 			.donate table .label{padding-left:5px;padding-right:10px;}
  39. 			.donate img
  40. 			{
  41. 				border:4px solid #EA5F00;width:140px;height:140px;margin:0 auto;
  42. 				display:block;margin-top:20px;color:#999;border-radius:4px;padding:5px;
  43. 			}
  44. 			@media (min-width: 375px) 
  45. 			{
  46. 				.donate{width:80%;left:10%;}
  47. 			}
  48. 			@media (min-width: 768px) 
  49. 			{
  50. 				.donate{width:40%;left:30%;}
  51. 			}
  52. 			@media (min-width: 992px) 
  53. 			{
  54. 			 	.donate{width:30%;left:35%;} 
  55. 			}
  56. 		</style>
  57. 	</head>
  58. 	<body>
  59. 		<button id="donate_open">打赏银两</button>
  60. 		<div id="donate" class="donate">
  61. 			<h3>打赏银两<span id="donate_close" title="关闭">×</span></h3>
  62. 			<p>博主辛苦了,我要打赏银两给博主,犒劳犒劳站长。</p>
  63. 			<table cellspacing="0" cellpadding="0">
  64. 				<tr>
  65. 					<td class="input"><input type="radio" id="zhifubao" name="money" value="1" checked="checked" /></td>
  66. 					<td class="label"><label for="zhifubao">支付宝支付</label></td>
  67. 					<td class="input"><input type="radio" id="weixin" name="money" value="2" /></td>
  68. 					<td class="label"><label for="weixin">微信支付</label></td>					
  69. 				</tr>
  70. 			</table>
  71. 			<img src="donate_1.jpg" alt="支付二维码" id="donate_code" title="支付支付" />			
  72. 		</div>
  73. 		<script type="text/javascript">
  74. 			$('#donate_open').click(function(){
  75. 				$('#donate').show();
  76. 			})
  77. 			$('#donate_close').click(function(){
  78. 				$('#donate').hide();
  79. 			})
  80. 			$('input[name="money"]').change(function(){
  81. 				var val = $(this).val();
  82. 				if(val == 1){
  83. 					$('#donate_code').attr('src',"donate_1.jpg");
  84. 				}else if(val == 2){
  85. 					$('#donate_code').attr('src',"donate_2.jpg");
  86. 				}
  87. 			})
  88. 			
  89. 		</script>
  90. 	</body>
  91. </html>

运行效果截图如下:

请输入图片名称

备注:这是一个响应式布局的弹窗,希望本文对大家有所帮助,试试给站长打赏哦~~~

版权归 马富天PHP博客 所有

本文标题:《jQuery实现页面弹窗【实现打赏功能】》

本文链接地址:http://www.mafutian.net/187.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

4

3

上一篇《 js实现禁止文本复制、禁止选中文本 》 下一篇《 Windows系统如何建立远程桌面连接 》
分享到:

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共2条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码