昨晚让 DeepSeek 帮忙给网站的一个网页创建一个打赏弹窗HTML代码，这个代码可以实现：点击"赞赏"按钮会弹出带有微信和支付宝二维码的打赏窗口，点击弹窗外部区域也可以关闭弹窗，效果如下。
![图片[1]-打赏弹窗HTML代码-十一张](https://www.11zhang.com/wp-content/uploads/2025/07/5a404d40dc20250723154221.gif)
演示地址
演示地址：https://www.11zhang.com/msdn
代码
代码如下，可以根据需要调整样式（颜色、大小、位置等）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打赏作者</title>
<style>
/* 打赏按钮基础样式 - 可放在任何位置 */
.reward-btn {
background-color: #ff4d4f;
color: white;
border: none;
border-radius: 20px;
padding: 8px 16px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
display: inline-flex;
align-items: center;
box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
transition: all 0.3s;
}
.reward-btn:hover {
background-color: #ff7875;
box-shadow: 0 4px 12px rgba(255, 77, 79, 0.4);
}
.reward-icon {
display: inline-block;
width: 18px;
height: 18px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
background-repeat: no-repeat;
margin-right: 6px;
}
/* 打赏弹窗样式 */
.reward-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.reward-content {
background-color: white;
border-radius: 8px;
width: 340px;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
color: #999;
}
.reward-header {
text-align: center;
padding: 20px 20px 15px;
color: #ff4d4f;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #f0f0f0;
}
.qr-container {
display: flex;
justify-content: space-around;
padding: 20px;
}
.qr-item {
text-align: center;
}
.qr-code {
width: 120px;
height: 120px;
border: 1px solid #eee;
border-radius: 4px;
padding: 5px;
margin-bottom: 8px;
}
.qr-title {
font-size: 14px;
font-weight: bold;
}
.reward-footer {
background-color: #f5f5f5;
border-radius: 0 0 8px 8px;
padding: 15px;
text-align: center;
cursor: pointer;
}
.donor-title {
font-weight: bold;
margin-bottom: 8px;
font-size: 16px;
color: #FF4500;
}
.donor-text {
font-size: 12px;
color: #666;
}
</style>
</head>
<body>
<!-- 示例1：固定在右上角的打赏按钮 -->
<button class="reward-btn" id="rewardBtn1" style="position: fixed; top: 20px; right: 20px;">
<span class="reward-icon"></span>打赏站长
</button>
<!-- 示例2：放在内容中的打赏按钮 -->
<div style="margin: 100px auto; text-align: center;">
<button class="reward-btn" id="rewardBtn2">
<span class="reward-icon"></span>打赏站长
</button>
</div>
<!-- 打赏弹窗 -->
<div class="reward-modal" id="rewardModal">
<div class="reward-content">
<span class="close-btn" id="closeBtn">×</span>
<div class="reward-header">你一赞赏我就写的更来劲儿了</div>
<div class="qr-container">
<div class="qr-item">
<div class="qr-code">
<img src="your-wechat-qr.png" width="120" height="120" alt="微信收款码">
</div>
<div class="qr-title">微信扫一扫</div>
</div>
<div class="qr-item">
<div class="qr-code">
<img src="your-alipay-qr.png" width="120" height="120" alt="支付宝收款码">
</div>
<div class="qr-title">支付宝扫一扫</div>
</div>
</div>
<div class="reward-footer" id="donorList">
<div class="donor-title">打赏者名单</div>
<div class="donor-text">您的支持和鼓励是我坚持输出的动力</div>
</div>
</div>
</div>
<script>
// 获取元素
const rewardBtns = document.querySelectorAll('.reward-btn');
const rewardModal = document.getElementById('rewardModal');
const closeBtn = document.getElementById('closeBtn');
const donorList = document.getElementById('donorList');
// 点击打赏按钮显示弹窗
rewardBtns.forEach(btn => {
btn.addEventListener('click', function() {
rewardModal.style.display = 'flex';
});
});
// 点击关闭按钮隐藏弹窗
closeBtn.addEventListener('click', function() {
rewardModal.style.display = 'none';
});
// 点击弹窗外部区域隐藏弹窗
rewardModal.addEventListener('click', function(e) {
if (e.target === rewardModal) {
rewardModal.style.display = 'none';
}
});
// 点击打赏者名单跳转页面
donorList.addEventListener('click', function() {
window.open('https://www.11zhang.com/rewards', '_blank'); // 替换为您的实际页面URL
});
</script>
</body>
</html>功能说明
1、灵活放置按钮
●代码提供了两个示例：一个固定在右上角，一个放在内容中间
●可以将.reward-btn按钮放在HTML的任何位置
2、点击触发弹窗
●点击"打赏站长"按钮会弹出白色打赏窗口
●弹窗顶部有红色文字"你一赞赏我就写的更来劲儿了"
●窗口内左右分别是微信和支付宝二维码区域
3、关闭功能
右上角有"×"关闭按钮，点击弹窗外部区域也可以关闭弹窗
4、打赏者名单跳转
需要将代码中的your-donor-list-page.html替换为您的实际页面URL，点击底部灰色"打赏者名单"区域会跳转到指定页面
使用说明
1、将代码中的图片路径替换为您的实际收款码
●your-wechat-qr.png - 微信收款码
●your-alipay-qr.png - 支付宝收款码
2、修改跳转链接
需要将your-donor-list-page.html替换为您想跳转的实际页面URL
3、按钮放置
复制以下代码到您想放置的位置，然后可以通过CSS调整按钮位置（如示例中的fixed定位）
<button class="reward-btn">...</button>这个代码基本实现了我想要的效果和功能需求，同时保持了代码的简洁和可维护性，非常棒！
温馨提示：本文最后更新于
2025-10-27 10:39:34，某些文章具有时效性，若有错误或下载地址失效，请在文末评论区留言© 版权声明
THE END
暂无评论内容