如何为Lightbox添加右上角关闭按钮，替代点击任意区域关闭功能？

Hey there! Let's tweak your lightbox to add that dedicated close button in the top-right corner, and adjust the closing logic so it only triggers when clicking the button (instead of anywhere in the lightbox background). Here's a step-by-step solution with modified code:

Key Changes We'll Make #

1. Add a persistent close button to the lightbox structure
2. Update the content-clearing logic to keep the close button intact when switching images
3. Replace the background-click closing behavior with a button-specific click handler
4. Tweak CSS to ensure the button stays visible and user-friendly

Full Modified Code

<div class="rowimg">
  <img class="columnimg" src="https://upload.wikimedia.org/wikipedia/commons/e/e0/SNice.svg">
</div>

<style>
#lightbox {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  display: none;
  justify-content: center;
  align-items: center;
}
#lightbox.active {
  display: flex;
}
#lightbox img {
  max-width: 90%;
  max-height: 80%;
  padding: 4px;
  background-color: black;
  border: 2px solid white;
}
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
  z-index: 1001; /* Ensure button sits above the image */
  user-select: none; /* Prevent accidental text selection */
}
.closebtn:hover {
  color: #ccc; /* Add hover feedback for better UX */
}
</style>

<script>
// Create lightbox container
const lightbox = document.createElement('div')
lightbox.id = 'lightbox'

// Create and add close button to lightbox
const closeBtn = document.createElement('span')
closeBtn.classList.add('closebtn')
closeBtn.textContent = '×' // Standard close icon
lightbox.appendChild(closeBtn)

document.body.appendChild(lightbox)

// Handle image clicks to open lightbox
const images = document.querySelectorAll('.columnimg')
images.forEach(columnimg => {
  columnimg.addEventListener('click', e => {
    lightbox.classList.add('active')
    // Create image element for lightbox display
    const img = document.createElement('img')
    img.src = columnimg.src
    // Clear existing image content but keep the close button
    while (lightbox.childNodes.length > 1) {
      lightbox.removeChild(lightbox.lastChild)
    }
    lightbox.appendChild(img)
  })
})

// Close lightbox only when clicking the close button
closeBtn.addEventListener('click', () => {
  lightbox.classList.remove('active')
})
</script>

What We Fixed & Improved #

• Persistent Close Button: The button is added once when initializing the lightbox, so it stays in place even when switching between images.
• Targeted Content Clearing: Instead of removing all child elements, we only remove elements after the close button, ensuring it never gets deleted.
• Intentional Closing: We removed the original background-click handler, so the lightbox only closes when the user explicitly clicks the close button.
• Polished CSS: Added z-index to keep the button above images, user-select: none to avoid text selection issues, and a hover effect for better interactivity.
• Cleaned Up Code: Fixed a stray quote in your original image tag and updated the image selector in CSS to match the dynamically created image element.

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