您将 .show 类定义为模式的子类，因为您在它们之间放置了一个空格。因此，中间不应有空格，而应有

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

例如：

.modal-container.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', () => {
  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 class="close" id='donateClose'>Cancel</button>
      <button class='submit' id='donateClose'>Submit</button>
    </form>
  </div>
</div>

您必须在 CSS 文件中自主定义 .show 类。

.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 class="close" id='donateClose'>Cancel</button>
      <button class='submit' id='donateClose'>Submit</button>
    </form>
  </div>
</div>