如何使用JavaScript显示缩略图并在单击时打开模式

<div id="thumbnail-container">
  <img src="thumbnail.jpg" alt="Thumbnail">
</div>

// 获取缩略图容器元素
var thumbnailContainer = document.getElementById("thumbnail-container");

// 添加点击事件监听器
thumbnailContainer.addEventListener("click", function() {
  // 创建模态框元素
  var modal = document.createElement("div");
  modal.classList.add("modal");

  // 创建大图元素
  var image = document.createElement("img");
  image.src = "fullsize.jpg";
  image.alt = "Fullsize Image";

  // 将大图添加到模态框中
  modal.appendChild(image);

  // 将模态框添加到页面中
  document.body.appendChild(modal);

  // 点击模态框以外的区域时，关闭模态框
  modal.addEventListener("click", function(event) {
    if (event.target === modal) {
      modal.remove();
    }
  });
});

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal img {
  max-width: 90%;
  max-height: 90%;
}