团队页面Modal弹窗仅首个成员生效问题求助

Hey there! I see exactly what's going on here—this is a super common pitfall with duplicate IDs in HTML, and it's totally fixable. Let's break it down and get your team member modals working properly.

What's Causing the Problem #

In your current code, you're repeating the same id="myModal" and id="myBtn" for every team member. But HTML requires IDs to be unique across the entire page! When you use document.getElementById('myModal') or document.getElementById('myBtn'), the browser only grabs the first element with that ID. All your other modals and buttons are completely ignored by your JavaScript, which is why only the first one works.

The Fix: Use a Reusable Modal (Cleanest Approach) #

Instead of duplicating the entire modal code for every member, we'll create one universal modal and dynamically update its content when a member's name is clicked. This is way cleaner and easier to maintain.

Step 1: Update Your HTML #

Keep a single modal, and add a data-pdf attribute to each member's name (we'll use this to pass the correct PDF path):

<!-- Single reusable modal -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <!-- Empty PDF object we'll update dynamically -->
    <object id="modalPdf" width="100%" height="100%" data=""></object>
  </div>
</div>

<!-- Team member names (use a class instead of duplicate IDs) -->
<span class="member-name" data-pdf="bio/john.pdf">John Doe</span>
<span class="member-name" data-pdf="bio/jane.pdf">Jane Smith</span>
<span class="member-name" data-pdf="bio/bob.pdf">Bob Johnson</span>

Step 2: Rewrite Your JavaScript #

Now we'll bind click events to all member names, update the modal's PDF source, and show it:

// Get the universal modal and PDF object
const modal = document.getElementById('myModal');
const modalPdf = document.getElementById('modalPdf');
const closeBtn = document.querySelector('.close');

// Get all member name elements
const memberNames = document.querySelectorAll('.member-name');

// Loop through each name and add a click handler
memberNames.forEach(name => {
  name.addEventListener('click', () => {
    // Grab the PDF path from the data attribute
    const pdfPath = name.getAttribute('data-pdf');
    // Update the modal's PDF source
    modalPdf.setAttribute('data', pdfPath);
    // Show the modal
    modal.style.display = 'block';
  });
});

// Close modal when clicking the X
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// Close modal when clicking outside of it
window.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.style.display = 'none';
  }
});

Alternative: Keep Multiple Modals (If You Prefer) #

If you really want to keep separate modals for each member, you'll need to use unique IDs for each modal and button. For example:

<!-- Team Member 1 -->
<span id="memberBtn-1">John Doe</span>
<div id="memberModal-1" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <object width="100%" height="100%" data="bio/john.pdf"></object>
  </div>
</div>

<!-- Team Member 2 -->
<span id="memberBtn-2">Jane Smith</span>
<div id="memberModal-2" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <object width="100%" height="100%" data="bio/jane.pdf"></object>
  </div>
</div>

Then update your JavaScript to loop through each pair:

// Get all member buttons
const memberBtns = document.querySelectorAll('[id^="memberBtn-"]');

memberBtns.forEach(btn => {
  // Extract the member ID from the button's ID (e.g., "1" from "memberBtn-1")
  const memberId = btn.id.split('-')[1];
  const modal = document.getElementById(`memberModal-${memberId}`);
  const closeBtn = modal.querySelector('.close');

  // Open modal on button click
  btn.addEventListener('click', () => {
    modal.style.display = 'block';
  });

  // Close modal on X click
  closeBtn.addEventListener('click', () => {
    modal.style.display = 'none';
  });
});

// Close any modal when clicking outside
window.addEventListener('click', (event) => {
  if (event.target.classList.contains('modal')) {
    event.target.style.display = 'none';
  }
});

Why This Works #

• The first approach uses data attributes to store dynamic content (PDF paths) and a single modal, which reduces code duplication and makes updates easier.
• The second approach uses unique IDs so the browser can correctly match each button to its corresponding modal, avoiding the "only first element works" issue.

Either solution will fix your problem and make all team member modals trigger correctly.

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