我是一个网络开发的初学者，我正试图为我的班级编程一个网站。我看了一个制作弹出窗口的视频，但是每次用户重新加载页面时，弹出窗口都会出现。我需要帮助。
下面是我的HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KI22 Website</title>
<!-- FONTAWESOME CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--GOOGLE FONTS (MONTSERRAT)-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="popup">
<button id="close">×</button>
<h2>Achtung! Wichtige Regeln</h2>
<p>1.An keine andere Person außerhalb der Klasse teilen!</p>
<p>2.KEINE SCREENSHOTS!</p>
<p>3.Nur schulrelevante Dateien hochladen!</p>
</div>
<!--==================== END OF POPUP ====================-->
<nav>
<div class="container nav__container">
<a href="index.html">
<img class="logo" src="images/logo.png" alt="logo">
</a>
<ul class="nav__menu">
<li><a href="index.html">Hauptmenü</a></li>
<li><a href="fächer.html">Fächer</a></li>
<li><a href="mitteilungen.html">Mitteilungen</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<button id="open-menu-btn"><i class="fa-solid fa-bars"></i></button>
<button id="close-menu-btn"><i class="fa-solid fa-xmark"></i></button>
</div>
</nav>
<!--==================== END OF NAVBAR ====================-->
<header>
<div class="container header__container">
<div class="header__left">
<h1>Willkommen zur KI Website</h1>
<p><h4>Diese Website wurde für schulische zwecke von G. Daoud programmiert. Du wirst in der Lage sein, deine Aufzeichnungen von der Unterrichtsstunde auf dieser Website hochzuladen, und die Aufzeichnungen deiner Klassenkameraden zu downloaden.</h4></p>
<a href="fächer.html" class="btn btn-primary">Loslegen</a>
</div>
<div class="header__right">
<div class="header__right-image">
<img src="./images/student.png">
</div>
</div>
</div>
</header>
<!--==================== END OF HEADER ====================-->
<section class="discord">
<div class="container discord__container">
<div class="discord__left">
<h1><i class="fa-brands fa-discord"></i>Discord</h1>
<p>Hier kannst du Member des Discord-Servers KI22 werden. Wir freuen uns über jeden Member.</p>
<p>In dem Server hast du die Möglichkeit, uns zu kontaktieren wenn du Probleme mit der Website hast, oder auch wenn es allgemein Probleme im Server gibt.</p>
<a href="#" class="btn">Member werden</a>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
这是我的JS代码:
window.addEventListener("load", function() {
setTimeout(
function open(event) {
document.querySelector(".popup").style.display = "block";
},
1000
)
});
document.querySelector("#close").addEventListener("click", function() {
document.querySelector(".popup").style.display = "none";
});
我试着在谷歌上找到答案，但这些解决方案都不起作用。我还看了youtube上的视频，但还是一无所获。
可以使用localStorage告诉浏览器页面已经加载。您将检查是否尚未加载，然后打开/关闭弹出窗口
window.addEventListener("load", function() {
setTimeout(
function open(event) {
if(!localStorage.getItem('loaded')){
document.querySelector(".popup").style.display = "block";
localStorage.setItem('loaded', 'true');
}
},
1000
)
});
document.querySelector("#close").addEventListener("click", function() {
document.querySelector(".popup").style.display = "none";
});
当你想再次打开弹出窗口时，调用localStorage并重新加载页面。
localStorage.setItem('loaded',null);