模态多个图像 - Javascript

在web开发中，常常需要在一个窗口中展示多个图像，并且需要支持弹出窗口后查看大图的功能。这时，我们可以使用模态框（Modal）来实现这一需求。

实现思路

我们可以添加一个按钮来触发模态框弹出，当模态框弹出时，我们将所有需要显示的图片放在一个div容器中，并通过Javascript动态地添加每个图片的点击事件，使其在弹出窗口中以大图的形式呈现。

代码实现

HTML结构

首先，我们需要一个button按钮来触发模态框，并定义一个id为myModal的div容器，用于放置所有图片。HTML结构如下：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body" id="modal-body">
      </div>
    </div>
  </div>
</div>

添加图片

接下来，我们需要使用Javascript动态地向模态框中添加图片。我们可以在按钮点击事件中执行以下代码：

// 获取模态框中的body元素
var modalBody = document.getElementById("modal-body");

// 定义待添加的图片数组
var imgList = ["img1.jpg", "img2.jpg", "img3.jpg"];

// 循环添加图片
for (var i = 0; i < imgList.length; i++) {
  // 创建图片元素
  var img = document.createElement("img");

  // 添加图片属性
  img.src = imgList[i];
  img.alt = "图像 " + (i+1);
  img.className = "img-fluid rounded mx-auto d-block";

  // 添加点击事件，使图片能够在弹出窗口中以大图形式呈现
  img.onclick = function() {
    document.getElementById("modal-img").src = this.src;
    $('#modal-img').on('shown.bs.modal', function () {
      $('#modal-img').trigger('focus')
    })
  }

  // 将图片元素添加到容器中
  modalBody.appendChild(img);
}

弹出窗口

最后，我们需要在弹出窗口中显示大图。我们需要定义一个id为modal-img的img元素，并将其放在模态框的body中。

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body" id="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 弹出窗口 -->
<div class="modal" tabindex="-1" role="dialog" id="modal-img">
  <div class="modal-dialog modal-lg" role="document">
    <img class="img-fluid" src="" alt="" style="max-height: 90vh;">
  </div>
</div>

完整代码

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body" id="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 弹出窗口 -->
<div class="modal" tabindex="-1" role="dialog" id="modal-img">
  <div class="modal-dialog modal-lg" role="document">
    <img class="img-fluid" src="" alt="" style="max-height: 90vh;">
  </div>
</div>

<script>
  // 获取模态框中的body元素
  var modalBody = document.getElementById("modal-body");

  // 定义待添加的图片数组
  var imgList = ["img1.jpg", "img2.jpg", "img3.jpg"];

  // 循环添加图片
  for (var i = 0; i < imgList.length; i++) {
    // 创建图片元素
    var img = document.createElement("img");

    // 添加图片属性
    img.src = imgList[i];
    img.alt = "图像 " + (i+1);
    img.className = "img-fluid rounded mx-auto d-block";

    // 添加点击事件，使图片能够在弹出窗口中以大图形式呈现
    img.onclick = function() {
      document.getElementById("modal-img").src = this.src;
    }

    // 将图片元素添加到容器中
    modalBody.appendChild(img);
  }
</script>