Кладка с модальным

ProgramBox

Кладка с модальным

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#javascript #modal-dialog #lightbox

Вопрос:

Я пытаюсь открыть модальный, когда щелкаю по картинке на каменной кладке.

Я собрал все вместе несколько фрагментов кода и достиг этого результата, но проблема в том, что модал работает только в том случае, если я помещаю id одно изображение одновременно. Если я помещу то же id самое на другое изображение, модальное не сработает.

Мне нужно, чтобы модал работал со всеми изображениями, а не только с одним. есть какие-нибудь советы?

 // Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.a<
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

 <!-- masonry html -->
<div class="P-portfolio-masonry-cont cont-1400 m-a mb-125">
  <div class="P-portfolio-m-c-foto">
    <img id="myImg" src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img src="https://assets.codepen.io/12005/suspension-bridge.jpg" alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
  </div>
</div>


<!-- modal html -->
<div id="myModal" class="modal">
  <span class="close">amp;times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

Ответ №1:

Вам нужно добавить onClick ко всем элементам (изображениям) — id ы должны быть уникальными в DOM, но вместо этого вы можете использовать class es.

 // this returns a collection of elements (
var imgArray = document.getElementsByClassName("thumb");

// iterate thru the collection and add event listener
for (let img of imgArray) {
  img.onclick = function() {
    console.log(this.alt);
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.a<
  }
};

 // Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var imgArray = document.getElementsByClassName("thumb");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

for (let img of imgArray) {
  img.onclick = function() {
    console.log(this.alt);
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.title = this.title;
    captionText.innerHTML = this.a<
  }
};

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

 .thumb {
  width: 200px;
  height: 300px;
  display: inline-block;
}

 <!-- masonry html -->
<div class="P-portfolio-masonry-cont cont-1400 m-a mb-125">
  <div class="P-portfolio-m-c-foto">
    <img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="A windmill"  alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="B windmill" alt="b windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="C windmill" alt="c windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img class="thumb" src="https://assets.codepen.io/12005/suspension-bridge.jpg" title="D windmill" alt="d windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="F windmill" alt="f windmill" />
  </div>
</div>


<!-- modal html -->
<div id="myModal" class="modal">
  <span class="close">amp;times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

Обновлено для добавления заголовка к изображениям (для отображения при наведении) — за комментарии

1. Вам нужно добавить прослушиватель событий к кнопке закрытия модала.

2. Выполните поиск в stackoverflow, и вы, скорее всего, найдете тот же вопрос уже здесь

3. Мне также нужно видеть текст подписи при наведении курсора на изображение. Как я могу это сделать?

4. Пожалуйста, задайте отдельный вопрос. Как правило, title для отображения чего — либо при наведении курсора достаточно добавить атрибут с надписью в качестве значения-например, <img src="..." title="Caption goes here" class="..." alt="..."/>

Метки: Кладка с модальным