<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹出层</title>
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
}
.modal {
background-color: #fefefe;
border: 1px solid #888;
width: 85%;
max-width: 480px;
padding: 20px;
border-radius: 8px;
position: relative;
z-index: 1;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.close-button {
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
border: none;
background: none;
outline: none;
}
.close-button:hover,
.close-button:focus {
color: black;
text-decoration: none;
}
#timer {
margin-right: 3px;
color: #434343;
font-size: 18px;
}
.timer-line {
width: 100%;
height: 1px;
background-color: #cccccc;
margin-top: 10px;
}
.modal-overlay.active {
display: flex;
}
.modal-footer {
display: flex;
justify-content: flex-end;
padding-top: 10px;
}
.modal-footer button {
background-color: red;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
outline: none;
}
.modal-footer button:hover {
background-color: darkred;
}
.modal-footergg {
display: flex;
padding-top: 10px;
}
.modal-footergg button {
background-color: #6aa84f;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
outline: none;
}
.modal-footergg button:not(:last-child) {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="modal-overlay" id="modalOverlay">
<div class="modal" id="myModal">
<!-- 头部 -->
<div class="modal-header">
<p><span id="timer">45</span><font size="4" color="#434343">秒后将会自动关闭</font></p>
<button class="close-button" onclick="closeModal()">×</button>
</div>
<div class="timer-line"></div>
<p><font size="4" color="red">请截图以下信息，以防走丢！</font></p>
<p><font size="3" color="#434343">咔咔猪网址：</font>
<a href="https://www.kkpig.cn" target="_blank">
<font size="3" color="#434343">kkpig.cn</font></a></p>
<p><font size="3" color="#434343">咔咔猪导航：hao.kkpig.cn</font></p>
<p><font size="3" color="#434343">咔咔猪工具：tool.kkpig.cn</font></p>
<div class="modal-footergg">
<button type="button" class="btn cancel" onclick="window.location.href='https://www.kkpig.cn/'">网址发布1</button>
<button type="button" class="btn cancel" onclick="window.location.href='https://www.kkpig.cn/'">网址发布2</button>
</div>
<div class="modal-footer">
<button type="button" class="btn cancel" onclick="closeModal()">立即关闭</button>
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById("modalOverlay").classList.add("active");
startTimer();
}
function closeModal() {
document.getElementById("modalOverlay").classList.remove("active");
clearTimeout(timerId);
}
let timerId;
function startTimer() {
let timer = 45;
const timerElement = document.getElementById("timer");
timerId = setInterval(() => {
timer--;
timerElement.textContent = timer;
if (timer <= 0) {
closeModal();
clearInterval(timerId);
}
}, 1000);
}
window.onload = openModal;
document.getElementById("modalOverlay").addEventListener("click", function(e) {
if (e.target === this) {
closeModal();
}
});
document.getElementById("myModal").addEventListener("click", function(e) {
e.stopPropagation();
});
</script>
</body>
</html>替换下面js为每天弹一次
<script>
function getCurrentDate() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
function hasModalBeenOpenedToday() {
const today = getCurrentDate();
const lastOpenedDate = localStorage.getItem('modalLastOpenedDate');
return lastOpenedDate === today;
}
function updateModalOpenedDate() {
const today = getCurrentDate();
localStorage.setItem('modalLastOpenedDate', today);
}
function openModal() {
if (hasModalBeenOpenedToday()) {
return;
}
document.getElementById("modalOverlay").classList.add("active");
startTimer();
updateModalOpenedDate();
}
function closeModal() {
document.getElementById("modalOverlay").classList.remove("active");
clearInterval(timerId);
}
let timerId;
function startTimer() {
let timer = 45;
const timerElement = document.getElementById("timer");
timerId = setInterval(() => {
timer--;
timerElement.textContent = timer;
if (timer <= 0) {
closeModal();
}
}, 1000);
}
document.addEventListener("DOMContentLoaded", () => {
openModal();
});
document.getElementById("modalOverlay").addEventListener("click", function(e) {
if (e.target === this) {
closeModal();
}
});
document.getElementById("myModal").addEventListener("click", function(e) {
e.stopPropagation();
});
</script> 
评论 (0)