为什么我的弹出窗口不起作用，虽然我连接了 Js？

Question

昨天我在 Html、Css 和 JS 中做了一个弹出窗口，但它没有用。

Javascript 与 Html 文件连接，您每次都可以在 header 上看到该按钮，但是当我单击“代码”按钮时会弹出一个...

在我的另一个项目中，弹出窗口使用相同的代码......我该怎么做才能工作？ 或者代码中的错误是什么？

 function togglePopup() { document.getElementById("popup").classList.toggle("active"); }

 * { box-sizing: border-box; margin: 0; padding: 0; } header { display: flex; justify-content: space-between; align-items: center; padding: 30px 10%; background-color: #24252a; }.logo { cursor: pointer; }.nav__links a, .cta, .overlay__content a { font-family: "Montserrat", sans-serif; font-weight: 500; color: #edf0f1; text-decoration: none; }.nav__links { list-style: none; display: flex; }.nav__links li { padding: 0px 20px; }.nav__links li a { transition: color 0.3s ease 0s; }.nav__links li a:hover { color: #0088a9; }.cta { padding: 9px 25px; background-color: rgba(0, 136, 169, 1); border: none; border-radius: 50px; cursor: pointer; transition: background-color 0.3s ease 0s; }.cta:hover { background-color: rgba(0, 136, 169, 0.8); } /* Mobile Nav */.menu { display: none; }.overlay { height: 100%; width: 0; position: fixed; z-index: 1; left: 0; top: 0; background-color: #24252a; overflow-x: hidden; transition: width 0.5s ease 0s; }.overlay--active { width: 100%; }.overlay__content { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; }.overlay a { padding: 15px; font-size: 36px; display: block; transition: color 0.3s ease 0s; }.overlay a:hover, .overlay a:focus { color: #0088a9; }.overlay.close { position: absolute; top: 20px; right: 45px; font-size: 60px; color: #edf0f1; } @media screen and (max-height: 450px) {.overlay a { font-size: 20px; }.overlay.close { font-size: 40px; top: 15px; right: 35px; } } @media only screen and (max-width: 800px) {.nav__links, .cta { display: none; }.menu { display: initial; } }.togglebutton { border-color: #0088a9; } #pop-up { position: fixed; top: 0; left: 0; z-index: 999; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8); visibility: hidden; opacity: 0; transition: opacity 0.2s; } #pop-up.open { visibility: visible; opacity: 1; } #pop-box { position: relative; max-width: 400px; background: #fff; margin: 50vh auto 0 auto; transform: translateY(-50%); } #pop-title { padding: 10px; margin: 0; background: #921515; color: #fff; } #pop-text { padding: 10px; margin: 0; background: #fff; color: #555; } #pop-close { position: absolute; top: 0; right: 5px; padding: 5px; color: #ffdcdc; font-size: 32px; cursor: pointer; }

 <link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet"> <header> <a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a> <nav> <ul class="nav__links"> <button>Skins</button> <button onclick="togglePopup()">Codes</button> <li><a href="#">Download</a></li> </ul> <div class="popup" id="popup"> <div class="overlay"></div> <div class="content"> <div class="close-btn" onclick="togglePopup()">&times;</div> <h1>title</h1> </div> </div> </nav> <a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a> </header> <main> </main>

Answer 1

1. 您的 id 拼写错误。 弹出 <-> 弹出
2. 您应该在 js toggle function 中添加open not active 。

 function togglePopup() { document.getElementById("popup").classList.toggle("open"); }

 * { box-sizing: border-box; margin: 0; padding: 0; } header { display: flex; justify-content: space-between; align-items: center; padding: 30px 10%; background-color: #24252a; }.logo { cursor: pointer; }.nav__links a, .cta, .overlay__content a { font-family: "Montserrat", sans-serif; font-weight: 500; color: #edf0f1; text-decoration: none; }.nav__links { list-style: none; display: flex; }.nav__links li { padding: 0px 20px; }.nav__links li a { transition: color 0.3s ease 0s; }.nav__links li a:hover { color: #0088a9; }.cta { padding: 9px 25px; background-color: rgba(0, 136, 169, 1); border: none; border-radius: 50px; cursor: pointer; transition: background-color 0.3s ease 0s; }.cta:hover { background-color: rgba(0, 136, 169, 0.8); } /* Mobile Nav */.menu { display: none; }.overlay { height: 100%; width: 0; position: fixed; z-index: 1; left: 0; top: 0; background-color: #24252a; overflow-x: hidden; transition: width 0.5s ease 0s; }.overlay--active { width: 100%; }.overlay__content { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; }.overlay a { padding: 15px; font-size: 36px; display: block; transition: color 0.3s ease 0s; }.overlay a:hover, .overlay a:focus { color: #0088a9; }.overlay.close { position: absolute; top: 20px; right: 45px; font-size: 60px; color: #edf0f1; } @media screen and (max-height: 450px) {.overlay a { font-size: 20px; }.overlay.close { font-size: 40px; top: 15px; right: 35px; } } @media only screen and (max-width: 800px) {.nav__links, .cta { display: none; }.menu { display: initial; } }.togglebutton { border-color: #0088a9; } #popup { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999; width: 100vw; height: 100vh; visibility: hidden; opacity: 0; background: rgba(255, 255, 255, 0.8); transition: opacity 0.2s; } #popup.open { visibility: visible; opacity: 1; } #pop-box { position: relative; max-width: 400px; background: #fff; margin: 50vh auto 0 auto; transform: translateY(-50%); } #pop-title { padding: 10px; margin: 0; background: #921515; color: #fff; } #pop-text { padding: 10px; margin: 0; background: #fff; color: #555; } #pop-close { position: absolute; top: 0; right: 5px; padding: 5px; color: #ffdcdc; font-size: 32px; cursor: pointer; }

 <link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet"> <header> <a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a> <nav> <ul class="nav__links"> <button>Skins</button> <button onclick="togglePopup()">Codes</button> <li><a href="#">Download</a></li> </ul> <div class="popup active" id="popup"> <div class="overlay"></div> <div class="content"> <div class="close-btn" onclick="togglePopup()">&times;</div> <h1>title</h1> </div> </div> </nav> <a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a> </header> <main> </main>

Answer 2

首先，您的 id 属性是“弹出”，并且在您的 CSS 规则中是“弹出”。

然后在您的 CSS 规则中，您使用 class “打开”来显示弹出窗口，但在 JS 中您使用“活动”。

因此，要正常工作，您应该更改以下内容：

function togglePopup() {
  document.getElementById("popup").classList.toggle("open");
}

然后改变：

<div class="popup" id="pop-up">
    <div class="overlay"></div>
    <div class="content">
        <div class="close-btn" onclick="togglePopup()">&times;</div>
        <h1>title</h1>
    </div>
</div>