Why doesn`t work my popup, although I connect Js?-CodePudding

Yesterday I made a popup in Html, Css and JS but it didn`t work.

Javascript is connected with the Html file, the button can you see on the header everytime, but I`ll that when I click on the button "Codes" that a popup open...

In a other project from me the popup works with the same code... What shall I do that it works? Or what is the mistake in the code?

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  href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
  <nav>
    <ul >
      <button>Skins</button>
      <button onclick="togglePopup()">Codes</button>
      <li><a href="#">Download</a></li>
    </ul>
    <div  id="popup">
      <div ></div>
      <div >
        <div  onclick="togglePopup()">&times;</div>
        <h1>title</h1>
      </div>
    </div>
  </nav>
  <a  href="https://discord.gg/7S4FaYEw">Discord Server</a>
</header>
<main>

</main>

CodePudding user response：

Your id is misspelled. popup <-> pop-up
You should add open not active in js toggle function.

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  href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
  <nav>
    <ul >
      <button>Skins</button>
      <button onclick="togglePopup()">Codes</button>
      <li><a href="#">Download</a></li>
    </ul>
    <div  id="popup">
      <div ></div>
      <div >
        <div  onclick="togglePopup()">&times;</div>
        <h1>title</h1>
      </div>
    </div>
  </nav>
  <a  href="https://discord.gg/7S4FaYEw">Discord Server</a>
</header>
<main>

</main>

CodePudding user response：

First and foremost your id attribute is "popup" and in your CSS rules is "pop-up".

Then in your CSS rules, you use the class "open" to show the popup, but in the JS you use "active".

So to work properly you should change the following:

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

Then change:

<div  id="pop-up">
    <div ></div>
    <div >
        <div  onclick="togglePopup()">&times;</div>
        <h1>title</h1>
    </div>
</div>