Создание модального окна для изображений

Question

Итак, я пытаюсь создать модальное окно, чтобы, когда пользователь щелкает что-то, открывалось модальное окно изображения. Пока что у меня есть базовый c один, использующий базовый c скрипт, но способ его выполнения позволит работать только одному за раз. проблема выбора по спецфи c id. Есть ли способ переписать это так, чтобы он принимал идентификатор и c всего, что было щелкнуто?

Answer 1

HTML:

CSS:

.modal-container {
  width: 100%;
  position: relative;
}

.modal-container .modal {
  position: absolute;
  width: 50%;
  top: -700px;
  left: 25%;
  transition: all 0.4s;
  padding: 30px;
  border: 1px solid #c3c3c3;
  border-radius: 5px;
  box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);

}
.modal-caption h1 {
  margin-top: 0;
}
.modal-container .call-back-modal {
  position: relative;
}
#image {
  top: -700px;
}

.modal-container .modal img {
  width: 100%;
}

JS:

function callModal(){
  var modal = document.getElementById("modal");

  if (modal.style.top === "0px") {
        modal.style.top = "-700px";
    } else {
        modal.style.top = "0px";
    }
}

function closeModal(){
  var closeModal = document.getElementById("modal");
modal.style.top = "-700px";

}

Live: Демо

Answer 2

Если вы имеете в виду, что хотите, чтобы каждый раз, когда пользователь нажимает на определенный элемент, отображается модальное окно. Затем вместо этого вызовите встроенную функцию: onclick="displayModal()" для того, что вы хотите отображать в модальном окне при нажатии.

Итак, это будет выглядеть так:

function displayModal(){
            modal.style.display = "block";
            captionText.innerHTML = modalImg.alt;
        }