I was trying to make a pop-up modal. It shows up if opacity set to 1, but it won't appear when button is clicked.

The show has opacity 1, but it won't work.

I'd appreciate any sort of help, thanks! I'd appreciate any sort of help, thanks! I'd appreciate any sort of help, thanks!

const donateOpen = document.getElementById('donateOpen');
const modal_container = document.getElementById('modal_container');
const donateClose = document.getElementById('donateClose');

donateOpen.addEventListener('click', () => {
  console.log('clicks');
  modal_container.classList.add('show');
});

donateClose.addEventListener('click', () => {
  modal_container.classList.remove('show');
});

.modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rbga(0,0,0,0.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  opacity: 0;
  pointer-events: none;
}

.modal-container .show {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  padding: 30px 50px;
  max-width: 100%;
  border-radius: 5px;
  width: 350px;
  height: 350px;
  background-color: white;
  text-align: center;
}

<button id='donateOpen'>DONATE NOW</button>

<div class='modal-container' id='modal_container'>
  <div class='modal'>
    <h2>Donate Now</h2>
    <form action="">
      <input type="text" placeholder='Name' class='input' id='name'>
      <input type="email" placeholder='E-Mail' class='input'>
      <button class='submit' id='donateClose'>Submit</button>
    </form>
  </div>
</div>

CodePudding user response：

You are defining the .show class as a child of the modal because you put a space between. So instead of

.modal-container .show {
  opacity: 1;
  pointer-events: auto;
}

it should be without the space in between like:

.modal-container.show {
  opacity: 1;
  pointer-events: auto;
}

Full Example:

const donateOpen = document.getElementById('donateOpen');
const modal_container = document.getElementById('modal_container');
const donateClose = document.getElementById('donateClose');

donateOpen.addEventListener('click', () => {
  console.log('clicks');
  modal_container.classList.add('show');
});

donateClose.addEventListener('click', () => {
  modal_container.classList.remove('show');
});

.modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rbga(0,0,0,0.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  opacity: 0;
  pointer-events: none;
}

.modal-container.show {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  padding: 30px 50px;
  max-width: 100%;
  border-radius: 5px;
  width: 350px;
  height: 350px;
  background-color: white;
  text-align: center;
}

.input {
  width: 80%;
  display: block;
  margin: 15px auto;
  padding: 12px 20px;
}

.input:focus {
  background-color: lightblue;
}

<button id='donateOpen'>DONATE NOW</button>
<div class='modal-container' id='modal_container'>
  <div class='modal'>
    <h2>Donate Now</h2>
    <form action="">
      <input type="text" placeholder='Name' class='input' id='name'>
      <input type="email" placeholder='E-Mail' class='input'>
      <input type="text" placeholder='Donation Amount' class='input'>
      <button  id='donateClose'>Cancel</button>
      <button class='submit' id='donateClose'>Submit</button>
    </form>
  </div>
</div>

CodePudding user response：

You have to define the .show class autonomously in the CSS file.

.show {
  opacity: 1;
  pointer-events: auto;
}

const donateOpen = document.getElementById('donateOpen');
const modal_container = document.getElementById('modal_container');
const donateClose = document.getElementById('donateClose');

donateOpen.addEventListener('click', () => {
  donateOpen.classList.add('hide');
  modal_container.classList.add('show');
});

donateClose.addEventListener('click', () => {
  modal_container.classList.remove('show');
});

.modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rbga(0,0,0,0.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  opacity: 0;
  pointer-events: none;
}

/* You have to define the show class autonomously in the CSS file. */
.show {
  opacity: 1;
  pointer-events: auto;
}

.hide {
  opacity: 0;
}

.modal {
  padding: 30px 50px;
  max-width: 100%;
  border-radius: 5px;
  width: 350px;
  height: 350px;
  background-color: white;
  text-align: center;
}

.input {
  width: 80%;
  display: block;
  margin: 15px auto;
  padding: 12px 20px;
}

.input:focus {
  background-color: lightblue;
}

<button id='donateOpen'>DONATE NOW</button>

<div class='modal-container' id='modal_container'>
  <div class='modal'>
    <h2>Donate Now</h2>
    
    <form action="">
      <input type="text" placeholder='Name' class='input' id='name'>
      <input type="email" placeholder='E-Mail' class='input'>
      <input type="text" placeholder='Donation Amount' class='input'>
      <button  id='donateClose'>Cancel</button>
      <button class='submit' id='donateClose'>Submit</button>
    </form>
  </div>
</div>