Как выскочить изображение из списка массивов / JavaScript

Question

У меня есть страница, которая отображает мои элементы из списка массивов, и у каждого из них есть изображение, которое ограничено 120px. Какой бы способ вывести это изображение в середину экрана с большим размером. Я видел несколько плагинов, которые могут помочь с этим, но я хочу сделать это без каких-либо плагинов.

html:

<div id="animallist"></div>

javascript:

const animals = [{
    name: "Cat",
    useful: "no",
    image: "https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png"
  },
  {
    name: "Dog",
    useful: "yes",
    image: "https://post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/02/322868_1100-1100x628.jpg"
  },
  {
    name: "Fish",
    useful: "no",
    image: "https://cdn0.wideopenpets.com/wp-content/uploads/2019/10/Fish-Names-770x405.png"
  },
  ]

animals.forEach(addLink);

function addLink(animal, i) {
  const div = document.createElement('div');
  const animalList = document.createElement('h2');
  const image = document.createElement('img');
  image.id = "image";
  animalList.innerHTML =  animal.name + " " +"-"+"useful?" + " "+ animal.useful;
  animalList.style.cssText = "text-align:center;"
  image.src = animal.image;
  div.appendChild(image);
  div.appendChild(animalList);
  div.dataset.animalName = animal.name;
  animallist.appendChild(div);
}

jsfiddle

Answer 1

Вы должны создать «всплывающий» div с классом «display: none» в начале, затем с помощью JS удалите этот класс «display: none» и замените внутренний img sr c на ваш img. Вот рабочий код: https://jsfiddle.net/bcdu3L2j/1/

const imgs = document.getElementsByTagName('img');
const imgsArray = Array.from(imgs);

const popUp = document.getElementById('pop-up');
const popImg = document.querySelector('#pop-up img');

function popUpImage(e) {
  const imgSrc = e.target.src;
  popImg.src = imgSrc;
  popUp.classList.remove("hidden");
}

imgsArray.forEach((img) => {
 img.addEventListener('click', popUpImage);
})
popUp.addEventListener('click', () => {
  popUp.classList.add("hidden");
});