子比主题 – 倒计时弹窗美化样式

飞流 · 发表于 2025-10-10 19:00:01

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

腾飞博客考虑到其他站点的使用，没有去调用子比主题的modal的弹窗，是自己加的弹窗，这是一款带有倒计时的弹窗，非常方便自己站长可以去卖自己的商品优惠提醒，有技术的按钮自己改一下用在自己的网站，喜欢的自行部署吧！

代码部署

定位：WP后台–>>外观–>>小工具–>>自定义HTML，建议将下面的代码放到我们的所有页面-底部全宽度

<style>
.popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;justify-content:center;align-items:center;padding:20px;box-sizing:border-box;background-image:url(https://img.alicdn.com/imgextra/i3/2210123621994/O1CN0126s1WY1QbIqmRMFsX_!!2210123621994.png)}.popup-content{background:white;max-width:500px;width:100%;border-radius:10px;padding:30px;box-shadow:0 0 20px rgba(0,0,0,0.1);position:relative}.popup h2{color:#2c3e50;margin-bottom:15px;text-align:center}.offset-right{text-align:center;font-size:17px;color:#171717;margin:10px 0}.countdown{text-align:center;font-size:20px;color:#e74c3c;margin:20px 0}.btn-container{display:flex;gap:10px;margin-top:20px}.popup-btn{flex:1;padding:12px 20px;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:background 0.3s}.know-btn{background:#FF0D0D;color:white}.know-btn:hover{background:#4C01FA}.hide-day-btn{background:#2c3e50;color:white}.hide-day-btn:hover{background:#34495e}
</style>
<div class="popup" id="myPopup">
<div class="popup-content">
<h2>永久钻石会员限时五折活动</h2>
<div class="offset-right">新站开发中后期本站会员可转移</div>
<div class="offset-right">通知凡是四月份开的会员提供订单找我补取</div>
<div class="countdown" id="countdown">倒计时：--天--时--分--秒</div>
<div class="btn-container">
<button class="popup-btn know-btn" onclick="closeTemporarily()">我知道了</button>
<button class="popup-btn hide-day-btn" onclick="closeForDay()">一天内不显示</button>
</div>
</div>
</div>
<script>
window.onload = function() {
checkPopupDisplay();
initCountdown();
};
function checkPopupDisplay() {
const lastShown = localStorage.getItem('popupLastShown');
const now = new Date().getTime();
const oneDay = 24 * 60 * 60 * 1000;
if (!lastShown || (now - lastShown) >= oneDay) {
showPopup();
}
}
function initCountdown() {
const endTime = new Date("2025-05-25T23:59:59").getTime();
const countdownElement = document.getElementById('countdown');
function updateCountdown() {
const now = new Date().getTime();
const distance = endTime - now;
if (distance > 0) {
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
countdownElement.textContent = `倒计时：${days}天${hours}时${minutes}分${seconds}秒`;
} else {
countdownElement.textContent = "活动已结束";
clearInterval(countdownInterval);
}
}
const countdownInterval = setInterval(updateCountdown, 1000);
updateCountdown();
}
function showPopup() {
const popup = document.getElementById('myPopup');
popup.style.display = 'flex';
}
function closeTemporarily() {
const popup = document.getElementById('myPopup');
popup.style.display = 'none';
}
function closeForDay() {
const popup = document.getElementById('myPopup');
popup.style.display = 'none';
localStorage.setItem('popupLastShown', new Date().getTime());
}
</script>

复制代码

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

[代码技巧] 子比主题 – 倒计时弹窗美化样式

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn