网格画廊模态框点击优化及图片下方用户信息栏开发需求

Hey there! Let's fix those two issues with your grid gallery modal to make it behave exactly how you want. Here's a step-by-step breakdown of the changes you need to make:

1. Fix Modal Close Behavior (Only Close on Dark Overlay Click) #

The problem right now is that any click inside the modal (including the image or your upcoming username) triggers the close action. We need to adjust the click event handler to only close when the dark overlay itself is clicked, not the content inside it.

JavaScript Fix: #

Find the code that handles closing the modal (likely attached to the overlay or modal container). Update it to check if the clicked element is the overlay itself:

// Assuming your overlay has a class like 'modal-overlay'
document.querySelector('.modal-overlay').addEventListener('click', function(e) {
  // Only close if the click is directly on the overlay, not its child elements
  if (e.target === this) {
    // Your existing close modal logic here (e.g., hiding the modal)
    document.querySelector('.modal').classList.remove('active');
  }
});

This way, clicks on the image or the new caption area won't trigger the modal to close—so your username link will work properly.

2. Add White Caption Box with User Avatar & Clickable Username #

We'll add a responsive caption box directly below the modal image that matches the image's width, then style it to include a circular avatar and a clickable username.

HTML Update (Inside Modal Content): #

Modify your modal content structure to include the new caption container:

<div class="modal-content">
  <img src="your-image-url.jpg" class="modal-image">
  <!-- New caption box -->
  <div class="modal-caption">
    <img src="user-avatar.jpg" class="user-avatar" alt="User Avatar">
    <a href="/user-timeline" class="username">@JohnDoe</a>
  </div>
</div>

CSS Styling: #

Add these styles to make the caption match the image width, look clean, and position the avatar/username properly:

.modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Keep your existing modal content styles */
}

.modal-caption {
  width: 100%;
  background: white;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.username {
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

.username:hover {
  text-decoration: underline;
}

Ensure Username Link Works: #

While the first fix should prevent the modal from closing when clicking the username, adding this extra step guarantees the link behaves as expected:

document.querySelectorAll('.username').forEach(link => {
  link.addEventListener('click', function(e) {
    e.stopPropagation();
    // The link will navigate normally since we stopped the event from bubbling up
  });
});

Putting all these changes together will give you a modal that only closes when clicking the dark background, plus a functional caption area with an avatar and clickable username that doesn't interfere with the modal's behavior.

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