📅  最后修改于: 2023-12-03 15:26:51.160000             🧑  作者: Mango
在web开发中,常常需要在一个窗口中展示多个图像,并且需要支持弹出窗口后查看大图的功能。这时,我们可以使用模态框(Modal)来实现这一需求。
我们可以添加一个按钮来触发模态框弹出,当模态框弹出时,我们将所有需要显示的图片放在一个div容器中,并通过Javascript动态地添加每个图片的点击事件,使其在弹出窗口中以大图的形式呈现。
首先,我们需要一个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>