js图片相册弹出预览特效

<div class="gallery">
  <img src="image1.jpg" alt="Image 1" class="gallery-item">
  <img src="image2.jpg" alt="Image 2" class="gallery-item">
  <!-- 更多图片 -->
</div>
<div class="modal" id="modal">
  <span class="close-button">&times;</span>
  <img class="modal-content" id="modal-image">
</div>

.gallery-item {
  cursor: pointer;
  width: 100px;
  height: 100px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  display: block;
  margin: auto;
  width: 80%;
  max-width: 700px;
}

document.querySelectorAll('.gallery-item').forEach(item => {
  item.addEventListener('click', function() {
    document.getElementById('modal').style.display = 'block';
    document.getElementById('modal-image').src = this.src;
  });
});

document.querySelector('.close-button').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'none';
});