模态框与JS报错：Uncaught TypeError: Cannot read property 'classList' of null

Hey there! Let's break down why you're hitting this error and get your modal working properly.

The Root Cause #

That error means your JavaScript is trying to access the classList property of a null value. Looking at your code, the modal_container variable is coming up null because your JS is running before the HTML elements finish loading. When document.getElementById('modal_container') runs, the browser hasn't rendered that div yet, so it can't find it.

Quick Fixes #

Here are two straightforward ways to fix this:

1. Move Your JavaScript to the End of the HTML #

Just place your <script> tag right before the closing </body> tag. This way, all your HTML elements will exist in the DOM before the JS tries to access them:

<button id="open">Introduction</button>
<div class="modal-container" id="modal-container">
  <div class="modal">
    <h1>Introduction</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta pariatur ut, veniam illum nemo repellat explicabo dignissimos ex ipsum aliquid.</p>
    <button id="close">Click here to close.</button>
  </div>
</div>

<script>
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');

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

close.addEventListener('click', () => {
  modal_container.classList.remove('show');
});
</script>
</body>

2. Wrap Your JS in DOMContentLoaded #

If you prefer to keep your JS in the <head> or another location, wrap it in a DOMContentLoaded event listener. This waits until the entire DOM is loaded before running your code:

document.addEventListener('DOMContentLoaded', () => {
  const open = document.getElementById('open');
  const modal_container = document.getElementById('modal_container');
  const close = document.getElementById('close');

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

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

Bonus Fix: CSS Selector Issue #

I noticed a small mistake in your CSS that would prevent the modal from showing properly even after fixing the JS error. Your selector .modal-container .show targets elements with class show inside .modal-container, but you're adding the show class directly to .modal-container itself. Change that to:

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

Full Working Code #

Here's the complete corrected code for reference:

HTML #

<button id="open">Introduction</button>
<div class="modal-container" id="modal-container">
  <div class="modal">
    <h1>Introduction</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta pariatur ut, veniam illum nemo repellat explicabo dignissimos ex ipsum aliquid.</p>
    <button id="close">Click here to close.</button>
  </div>
</div>

<script>
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');

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

close.addEventListener('click', () => {
  modal_container.classList.remove('show');
});
</script>

CSS #

button {
  background-color: crimson;
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px 30px;
  font-size: 14px;
  border-radius: 5px;
  margin-top: 10px;
}

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

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

.modal {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  background-color: white;
  border-radius: 5px;
  padding: 30px 50px;
  width: 800px;
  max-width: 100%;
  text-align: center;
}

.modal h1 {
  margin: 0;
}

.modal p {
  opacity: 0.7;
  font-size: 14px;
}

Give this a try, and your modal should open and close without errors now! 😊

内容的提问来源于stack exchange，提问作者UKzs