5

I'm a bit new to web development. As my first project with JS, I decided to create a simple button, on which if someone clicks, it shows a custom popup. But the thing is after closing the popup window, I have to refresh the page to click the button again.

Here is my code so far:

const btn = document.querySelector('.btn');
const cloBtn = document.querySelector('.close');
const popUp = document.querySelector('.popup');
const overlay = document.querySelector('.overlay');

btn.addEventListener('click', () => {
  popUp.classList.add('open');
  overlay.classList.add('overlay-open');

});

cloBtn.addEventListener('click', () => {
  popUp.classList.add('popClose');
  overlay.classList.add('overlay-close');

})
body {
  margin: 0%;
}

.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button {
  border: none;
  cursor: pointer;
}

.btn button {
  background-color: blue;
  padding: 15px 45px 15px 45px;
  font-size: large;
  font-weight: 700;
  color: rgb(255, 255, 255);
  border-radius: 10px;
}

.popup {
  width: 300px;
  background-color: rgb(228, 228, 228);
  height: 150px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  border-radius: 10px;
  z-index: 5;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: scale(1) translate(-50%, -50%);
  visibility: hidden;
}

.popup button {
  background-color: rgb(255, 0, 55);
  padding: 10px 30px 10px 30px;
  font-size: medium;
  font-weight: 700;
  color: rgb(0, 0, 0);
  border-radius: 10px;
}

.overlay {
  height: 100%;
  width: 100%;
  background-color: rgba(133, 131, 131, 0.555);
  position: absolute;
  z-index: 2;
  visibility: hidden;
}

.overlay-open {
  visibility: visible;
}

.overlay-close {
  visibility: hidden;
}

.open {
  visibility: visible;
  animation: boxPop 0.3s ease-in;
}

@keyframes boxPop {
  from {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%);
  }
}

.popClose {
  animation: boxClo 0.3s ease-in;
  transform: translate(-50%, -50%) scale(0);
}

@keyframes boxClo {
  from {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%);
  }
  to {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
  }
}
<!DOCTYPE html>
<html lang="en">

<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">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="btn"><button>Press Me</button></div>
  <div class="popup">
    <div class="sentence">Hello Nice to Meet You!</div>
    <div class="close"><button>Close</button></div>
  </div>
  <div class="overlay"></div>

  <script src="app.js"></script>
</body>

</html>

3 Answers 3

5

The issue is, that both button presses adding a class but not removing the counter class. Simplest solution would be the usage of toggle. In that case you can bind the same eventListener to both buttons and shorten the JS code drastically:

const btn = document.querySelectorAll('.btn');
const popUp = document.querySelector('.popup');
const overlay = document.querySelector('.overlay');

btn.forEach(el => el.addEventListener('click', () => {
  popUp.classList.toggle('open');
  overlay.classList.toggle('overlay-open');
}));
body {
  margin: 0%;
}

.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button {
  border: none;
  cursor: pointer;
}

.btn button {
  background-color: blue;
  padding: 15px 45px 15px 45px;
  font-size: large;
  font-weight: 700;
  color: rgb(255, 255, 255);
  border-radius: 10px;
}

.popup {
  width: 300px;
  background-color: rgb(228, 228, 228);
  height: 150px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  border-radius: 10px;
  z-index: 5;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: scale(1) translate(-50%, -50%);
  visibility: hidden;
}

.popup button {
  background-color: rgb(255, 0, 55);
  padding: 10px 30px 10px 30px;
  font-size: medium;
  font-weight: 700;
  color: rgb(0, 0, 0);
  border-radius: 10px;
}

.overlay {
  height: 100%;
  width: 100%;
  background-color: rgba(133, 131, 131, 0.555);
  position: absolute;
  z-index: 2;
  visibility: hidden;
}

.overlay-open {
  visibility: visible;
}

.overlay-close {
  visibility: hidden;
}

.open {
  visibility: visible;
  animation: boxPop 0.3s ease-in;
}

@keyframes boxPop {
  from {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%);
  }
}

.popClose {
  animation: boxClo 0.3s ease-in;
  transform: translate(-50%, -50%) scale(0);
}

@keyframes boxClo {
  from {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%);
  }
  to {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
  }
}
<!DOCTYPE html>
<html lang="en">

<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">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="btn"><button>Press Me</button></div>
  <div class="popup">
    <div class="sentence">Hello Nice to Meet You!</div>
    <div class="btn"><button>Close</button></div>
  </div>
  <div class="overlay"></div>

  <script src="app.js"></script>
</body>

</html>

2

You have to remove old class after each function execution to work it properly.

const btn= document.querySelector('.btn');
const cloBtn=document.querySelector('.close');
const popUp=document.querySelector('.popup');
const overlay=document.querySelector('.overlay');

btn.addEventListener('click',()=>{
    popUp.classList.add('open'); 
    overlay.classList.add('overlay-open'); 
    popUp.classList.remove('popClose');
    overlay.classList.remove('overlay-close')
    
 });

 cloBtn.addEventListener('click',()=>{
        popUp.classList.remove('open'); 
        overlay.classList.remove('overlay-open');
        popUp.classList.add('popClose');
        overlay.classList.add('overlay-close');
   
})
body{
margin: 0%;

}

.btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
}

button{
    border: none;
    cursor: pointer;
}

.btn button{
    background-color: blue;
    padding: 15px 45px 15px 45px;
    font-size: large;
    font-weight: 700;
    color: rgb(255, 255, 255);
    border-radius: 10px;
}

.popup{
    width: 300px;
    background-color: rgb(228, 228, 228);
    height: 150px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-radius:10px ;
    z-index: 5;
    position: absolute;
    top: 30%;
    left: 50%;
    transform:scale(1) translate(-50% ,-50%);
    visibility: hidden;
}

.popup button{
    background-color: rgb(255, 0, 55);
    padding: 10px 30px 10px 30px;
    font-size: medium;
    font-weight: 700;
    color: rgb(0, 0, 0);
    border-radius: 10px;
}

.overlay{
    height: 100%;
    width: 100%;
    background-color: rgba(133, 131, 131, 0.555);
    position: absolute;
    z-index: 2;
    visibility: hidden;
}

.overlay-open{
    visibility: visible;
}

.overlay-close{
    visibility: hidden;
}

.open{
    visibility: visible;
   animation: boxPop 0.3s ease-in;
}

@keyframes boxPop {
    from {
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50% ,-50%) scale(0);
    }
  to {
    position: absolute;
    top: 30%;
    left: 50%;
    transform:scale(1) translate(-50% ,-50%);
  }
}

.popClose{
    animation: boxClo 0.3s ease-in;
    transform:translate(-50% ,-50%) scale(0);
}

@keyframes boxClo {
    from {
        position: absolute;
    top: 30%;
    left: 50%;
    transform:scale(1) translate(-50% ,-50%);
        
    }
  to {
    position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50% ,-50%) scale(0);
  }
} 
<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="btn"><button>Press Me</button></div>
<div class="popup">
    <div class="sentence">Hello Nice to Meet You!</div>
    <div class="close"><button>Close</button></div>
</div>
<div class="overlay"></div>

    <script src="app.js"></script>
</body>
</html>

3
  • 1
    use toggle which would be way more efficient. Then youc an merge both functions into the same and end up with less then half of the code.
    – tacoshy
    Commented Jun 21, 2022 at 10:51
  • yes, that is a better way for this.
    – meet d
    Commented Jun 21, 2022 at 11:00
  • since "open" and "popClose" do different animations, your way is enough for them. "overlay-open" and "overlay-close" just do visibility change, they can use the toggling. Commented Jun 26, 2022 at 20:22
2

It's because you are adding open and overlay-open classes and never removing them. So after hitting close, you have open and popClose on <div class="popup">, and overlay-open and overlay-close on <div class="overlay">.

And CSS specificity makes that the second classes apply. You could do as below, having 2 classes instead of 4. You just need open and overlay-open.

const btn= document.querySelector('.btn');
const cloBtn=document.querySelector('.close');
const popUp=document.querySelector('.popup');
const overlay=document.querySelector('.overlay');

btn.addEventListener('click',()=>{
    popUp.classList.add('open'); 
    overlay.classList.add('overlay-open'); 
    
 });

 cloBtn.addEventListener('click',()=>{
    popUp.classList.remove('open'); 
    overlay.classList.remove('overlay-open'); 
   
})
body{
margin: 0%;

}

.btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
}

button{
    border: none;
    cursor: pointer;
}

.btn button{
    background-color: blue;
    padding: 15px 45px 15px 45px;
    font-size: large;
    font-weight: 700;
    color: rgb(255, 255, 255);
    border-radius: 10px;
}

.popup{
    width: 300px;
    background-color: rgb(228, 228, 228);
    height: 150px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-radius:10px ;
    z-index: 5;
    position: absolute;
    top: 30%;
    left: 50%;
    transform:scale(1) translate(-50% ,-50%);
    visibility: hidden;
}

.popup button{
    background-color: rgb(255, 0, 55);
    padding: 10px 30px 10px 30px;
    font-size: medium;
    font-weight: 700;
    color: rgb(0, 0, 0);
    border-radius: 10px;
}

.overlay{
    height: 100%;
    width: 100%;
    background-color: rgba(133, 131, 131, 0.555);
    position: absolute;
    z-index: 2;
    visibility: hidden;
}

.overlay-open{
    visibility: visible;
}
/*
.overlay-close{
    visibility: hidden;
}*/

.open{
    visibility: visible;
   animation: boxPop 0.3s ease-in;
}

@keyframes boxPop {
    from {
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50% ,-50%) scale(0);
    }
  to {
    position: absolute;
    top: 30%;
    left: 50%;
    transform:scale(1) translate(-50% ,-50%);
  }
}
/*
.popClose{
    animation: boxClo 0.3s ease-in;
    transform:translate(-50% ,-50%) scale(0);
}*/

@keyframes boxClo {
    from {
        position: absolute;
    top: 30%;
    left: 50%;
    transform:scale(1) translate(-50% ,-50%);
        
    }
  to {
    position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50% ,-50%) scale(0);
  }
}
<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="btn"><button>Press Me</button></div>
<div class="popup">
    <div class="sentence">Hello Nice to Meet You!</div>
    <div class="close"><button>Close</button></div>
</div>
<div class="overlay"></div>

    <script src="app.js"></script>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.