如何在单击图像时动态更改模态的内容

Question

我在 HTML 页面上有以下 3 张缩略图。当用户单击这些图像中的任何一个时，我想以模式显示该特定图像。

如何在每次点击图片时动态传递模态体内的图片名称？

<a href="images/Picture1.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <img src="images/Picture1.jpg" alt="image not available" onclick=check(this)>
</a>
<a href="images/Picture2.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <img src="images/Picture2.jpg" alt="image not available" onclick=check(this)>
</a>
<a href="images/Picture3.jpg" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <img src="images/Picture3.jpg" alt="image not available" onclick=check(this)>
</a>

模态

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Image</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img src="images/Picture1.jpg" alt="image not available" id="imagepreview" style="width: 100%; height: 100%;">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Js 函数告诉，哪个图像被点击了

function check(img) {
  var src = img.src.replace(/^.*[\\/]/, "");
  console.log(src);
}

Answer 1

您可以将模态主体中图像的 src 属性替换为被点击的图像之一。

每张图片有onclick=check(this)。这意味着函数 check 将接收被单击的 img 元素作为参数。

您可以 select 使用 document.getElementById() 并使用 src 更新模态图像的 src，这要归功于它的 id ] 参数中的 img 元素。

function check(img) {
  document.getElementById("imagepreview").src = img.src;
}

如何在单击图像时动态更改模态的内容

how to dynamically change the content of modal on an Image click

html

javascript

css

bootstrap-modal

bootstrap-4