多模态框（Modal）功能异常求助：仅首个可正常触发

Hey there! I see you're stuck with only your first modal working—let's get all four of those image-triggered modals up and running smoothly. The core issue here is duplicate id attributes in your HTML, which breaks JavaScript's ability to target the right elements. Here's how to fix it step by step:

1. Understand the Problem #

In HTML, every id must be unique. When you reuse myBtn and myModal for multiple elements, the browser only recognizes the first occurrence. That's why your later modals don't respond to clicks.

2. Updated Full Code (HTML + CSS + JS) #

I've adjusted your code to use unique identifiers and universal JavaScript that works for all modals:

<!doctype html>
<html>
<head>
  <style>
    /*section employee pop up*/
    /* The Modal (background) */
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
      background-color: #1a1a1a;
      margin: auto;
      padding: 20px;
      border: 0;
      width: 80%;
      color: #ffffff;
    }

    /* The Close Button */
    .close {
      color: #FFFFFF;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: #f1f3f2;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!--andre-->
  <div class="employee andre">
    <!-- Trigger/Open The Modal -->
    <button class="modal-trigger" data-target="#modal-andre">
      <img src="http" alt="" class="image"/>
    </button>
    <!-- The Modal -->
    <div id="modal-andre" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <div class="text">
          <h3>Andr茅 Lehoux</h3>
          <ul>
            <li>Andr茅 has been practicing in Hearst since 2000. He is originally from Hearst, but he lived in Montreal for part of his childhood and completed his university studies at the University of Ottawa.</li>
            <li>Andr茅 has a general practice of law. He has over 20 years of experience practicing law in northern Ontario, including Aboriginal communities on the James Bay coast. He handles cases in criminal and family law, real estate law, wills and estates, civil litigation and commercial and corporate law. Andr茅 assists victims of crime in obtaining compensation from the CICB and has helped members of aboriginal communities to obtain compensation for physical and psychological abuse in residential schools. Finally, for more than 15 years, Andr茅 has been a prosecutor for the Ministry of Natural Resources and Forestry for provincial offences related to this department.</li>
            <li>Andr茅 has always been involved in his community to improve the lot of less fortunate and poor people. He sat and served as Chair of the Board of Directors (CA) of La Maison Arc-en-ciel for more than 10 years. Subsequently, he was part of the Notre-Dame Hospital Foundation team from 2007 to 2017. He is currently a member of the Board of Directors of the Grand-Nord Legal Clinic.</li>
            <li>Andr茅 obtained his Bachelor of Business Administration from the University of Ottawa in 1991 and subsequently obtained his law degree in 1994. He did his articling practice in David Lanthier's law office in Cochrane 1995 and he was called to the bar in 1996. After working for a few years in Cochrane, he returned to his hometown.</li>
            <li>Andr茅 is a member of the AJEFO as well as the Cochrane Law Association.</li>
            <li>Finally, when Andr茅 does not work, he enjoys the outdoors and the company of his wife, Micheline, and his little Chow Chow, Juliet.</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="teamInfo">
      <h3>Andr茅 Lehoux</h3>
      <h4>Lawyer</h4>
      <h5><a href="mailto:aclehoux@ntl.sympatico.ca">aclehoux@ntl.sympatico.ca</a></h5>
    </div>
  </div>

  <!--karine-->
  <div class="employee karine">
    <!-- Trigger/Open The Modal -->
    <button class="modal-trigger" data-target="#modal-karine">
      <img src="../images/karineBrochuPale.jpg" alt="" class="image"/>
    </button>
    <!-- The Modal -->
    <div id="modal-karine" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <h3>Karine Brochu</h3>
        <ul>
          <li>Karine was born and raised in Hearst. She has been working at the firm as a legal assistant since 2013.</li>
          <li>Karine works along side Mr. Le</li>
        </ul>
      </div>
    </div>
  </div>

  <script>
    // Get all modal trigger buttons and close buttons
    const modalTriggers = document.querySelectorAll('.modal-trigger');
    const closeButtons = document.querySelectorAll('.close');

    // Function to open a specific modal
    function openModal(modalSelector) {
      const modal = document.querySelector(modalSelector);
      modal.style.display = "block";
    }

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

    // Attach click events to all trigger buttons
    modalTriggers.forEach(button => {
      button.addEventListener('click', () => {
        const targetModal = button.getAttribute('data-target');
        openModal(targetModal);
      });
    });

    // Attach click events to all close buttons
    closeButtons.forEach(button => {
      button.addEventListener('click', () => {
        // Find the closest parent modal element
        const modal = button.closest('.modal');
        closeModal(modal);
      });
    });

    // Close modal when clicking outside the content area
    window.addEventListener('click', (event) => {
      if (event.target.classList.contains('modal')) {
        closeModal(event.target);
      }
    });
  </script>
</body>
</html>

3. Key Changes Explained #

• Unique IDs: Each modal now has a unique id (like modal-andre, modal-karine) so JavaScript can target them individually.
• Shared Trigger Class: All trigger buttons use the same modal-trigger class, making it easy to select all of them at once.
• Data Target Link: The data-target attribute on each button tells JavaScript exactly which modal to open when clicked.
• Universal JavaScript: The JS uses querySelectorAll to grab all triggers and close buttons, then loops through them to attach events. This means you can add as many modals as you want later without rewriting code.

Just repeat this pattern for your other two employees, and all four modals will work perfectly!

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