如何使用addEventListener()、querySelectorAll实现网站同类型弹窗及代码修复

Let's work through fixing your multiple modal setup. Your current code has a few key issues that are preventing it from working correctly:

Key Issues in Your Original Code #

• Incorrect close button selection: You're only grabbing the first closeBtn with querySelectorAll('.closeBtn')[0], so trying to access closeBtn[i] in the loop will throw an error.
• Unlinked buttons and modals: Your openModal/closeModal functions try to modify modal (a NodeList of all modals) directly instead of targeting the specific modal tied to the button/close icon.
• Duplicate event listeners: You're binding the outsideClick listener to the window inside the loop, which means it will be added multiple times (once per button).
• NodeList vs single element: document.querySelectorAll() returns a NodeList, not a single element, so you can't use .style.display directly on it.

Corrected Code #

HTML (Dynamic PHP Output)

First, let's make sure your dynamic HTML structure is consistent (I'll clean up the snippet a bit for clarity):

<div class="product-item">
  <a href='single.php'><img title=' ' alt=' ' src='images/<?php echo $row2["pic"]; ?>'></a>
  <p>Cookware</p>
  <h4>$<?php echo $row2["price"]; ?> <span>$45.00</span></h4>
  <button class='modalBtn button'>Details</button>
  <div class='simpleModal modal'>
    <div class='modal-content'>
      <div class='modal-header'>
        <span class='closeBtn'>&times;</span>
        <h2>Modal Header</h2>
      </div>
      <div class='modal-body'>
        <p><?php echo $row2["name"]; ?></p>
        <p><?php echo $row2["description"]; ?></p>
      </div>
      <div class='modal-footer'>
        <h3>Modal Footer</h3>
      </div>
    </div>
  </div>
</div>

Note: Wrapping each product + modal in a container (product-item) makes it easier to link buttons to their corresponding modals.

JavaScript

<script type="text/javascript">
// Get all modal buttons, modals, and close buttons
const modalBtns = document.querySelectorAll('.modalBtn');
const modals = document.querySelectorAll('.simpleModal');
const closeBtns = document.querySelectorAll('.closeBtn');

// Function to open a specific modal
function openModal(targetModal) {
  targetModal.style.display = 'block';
}

// Function to close a specific modal
function closeModal(targetModal) {
  targetModal.style.display = 'none';
}

// Function to close modal when clicking outside
function outsideClick(e) {
  // Check if the click target is a modal itself (not the content inside)
  if (e.target.classList.contains('simpleModal')) {
    e.target.style.display = 'none';
  }
}

// Bind click events to each modal button
modalBtns.forEach(btn => {
  // Find the corresponding modal (next sibling element of the button)
  const modal = btn.nextElementSibling;
  
  btn.addEventListener('click', () => openModal(modal));
  
  // Find the close button inside this modal
  const closeBtn = modal.querySelector('.closeBtn');
  closeBtn.addEventListener('click', () => closeModal(modal));
});

// Bind outside click event ONCE to the window
window.addEventListener('click', outsideClick);
</script>

What's Improved? #

• Linked buttons and modals: Using btn.nextElementSibling, we directly connect each "Details" button to its adjacent modal. If your HTML structure changes later, you could also use btn.closest('.product-item').querySelector('.simpleModal') for more flexibility.
• Single event listener for outside clicks: We bind this once to the window instead of multiple times in the loop.
• Targeted modal actions: Each openModal/closeModal call now works on a specific modal element, not the entire NodeList.
• Proper close button selection: For each modal, we grab its internal close button using modal.querySelector('.closeBtn'), ensuring we're targeting the right one.

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